ホームページ > 記事 > ウェブフロントエンド > Ajaxを使用する場合、Json-libはどのように処理しますか
今回は、Ajax を使用する際の Json-lib の扱い方について説明します。Ajax を使用する場合の 注意事項 は何ですか? 以下は実際的なケースです。
ajax や easyui などのフレームワークを使用している場合でも、バックグラウンドでデータをフロントに出力する場合には、json 処理の問題が発生します。1 つは手動で json 処理メソッドを設定する方法です。 json-lib ソリューションを使用します。通常の手動設定方法はフィールド名に応じて 1 つずつ設定する必要があるため、他のオブジェクトでは使用できず、コードの再利用性が低下します。json-lib ツールを使用すると、自動化を実現できます。処理効率とコードの再利用性を大幅に向上させるための対策として、事例に基づいて次の 2 つの方法を紹介します: 方法 1: easyui のRequest メソッドを使用して手動で設定を変更する通常の方法。 例として、フロントデスクは dategrid を通じてバックグラウンドからユーザーリストデータをリクエストします。 データには通常のフィールド (int、String) データと日付 (date) データがあります。 ********** *************************************** *********** ************************************** ************ *************************************
アクションレイヤー:<table id="dg" title="用户管理" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" url="${pageContext.request.contextPath}/user_list.action" fit="true" toolbar="#tb"> <thead> <tr> <th field="cb" checkbox="true" align="center"></th> <th field="id" width="50" align="center">编号</th> <th field="trueName" width="80" align="center">真实姓名</th> <th field="userName" width="80" align="center">用户名</th> <th field="password" width="80" align="center">密码</th> <th field="sex" width="50" align="center">性别</th> <th field="birthday" width="100" align="center">出生日期</th> <th field="identityId" width="130" align="center">身份证</th> <th field="email" width="120" align="center">邮件</th> <th field="mobile" width="80" align="center">联系电话</th> <th field="address" width="100" align="center">家庭地址</th> </tr> </thead> </table>***** ************************************** ************* ************************************ ************** *********************************** ************util ツール :
public void list()throws Exception{ PageBean pageBean=new PageBean(Integer.parseInt(page), Integer.parseInt(rows)); List<User> userList=userService.findUserList(s_user, pageBean); Long total=userService.getUserCount(s_user); JSONObject result=new JSONObject(); JSONArray jsonArray=JsonUtil.formatUserListToJsonArray(userList); //easyui接收属性为rows(数据内容)和total(总记录数) result.put("rows", jsonArray); result.put("total", total); //获取response对象 ResponseUtil.write(ServletActionContext.getResponse(), result); }方法 2: easyui の request メソッドを例として、フロントエンドがバックエンドに製品リスト データを要求します。 dategrid. データには日付 (date) データだけでなく、通常のフィールド (int, String) データもあります。同時に、商品オブジェクト (Product) もカテゴリ オブジェクト (ProductType) jsp ページにカスケードされます。 :
public class JsonUtil { /** * 将List结果集转化为JsonArray * @param gradeService * @param stuList * @return * @throws Exception */ public static JSONArray formatUserListToJsonArray(List<User> userList)throws Exception{ JSONArray array=new JSONArray(); for(int i=0;i<userList.size();i++){ User user=userList.get(i); JSONObject jsonObject=new JSONObject(); jsonObject.put("userName", user.getUserName()); //需手动逐个配置json的key-code jsonObject.put("password", user.getPassword()); jsonObject.put("trueName", user.getTrueName()); jsonObject.put("sex", user.getSex()); jsonObject.put("birthday", DateUtil.formatDate((user.getBirthday()), "yyyy-MM-dd")); jsonObject.put("identityId", user.getIdentityId()); jsonObject.put("email", user.getEmail()); jsonObject.put("mobile", user.getMobile()); jsonObject.put("address", user.getAddress()); jsonObject.put("id", user.getId()); array.add(jsonObject); } return array; } }*********************************************** *********************************** *************** ************************************ ************** **********アクションレイヤー:
<table id="dg" title="商品管理" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" url="${pageContext.request.contextPath}/product_list.action" fit="true" toolbar="#tb"> <thead> <tr> <th field="cb" checkbox="true" align="center"></th> <th field="id" width="50" align="center" hidden="true">编号</th> <th field="proPic" width="60" align="center" formatter="formatProPic">商品图片</th> <th field="name" width="150" align="center">商品名称</th> <th field="price" width="50" align="center">价格</th> <th field="stock" width="50" align="center">库存</th> <th field="smallType.id" width="100" align="center" formatter="formatTypeId" hidden="true">所属商品类id</th> <th field="smallType.name" width="100" align="center" formatter="formatTypeName">所属商品类</th> <th field="description" width="50" align="center" hidden="true">描述</th> <th field="hotTime" width="50" align="center" hidden="true">上架时间</th> </tr> </thead> </table>****************** ************** ************************************* ************* ************************************** *********** *********************util tools:
public void list() throws Exception{ PageBean pageBean=new PageBean(Integer.parseInt(page),Integer.parseInt(rows)); List<Product> productList=productService.getProducts(s_product, pageBean); long total=productService.getProductCount(s_product); //使用jsonLib工具将list转为json JsonConfig jsonConfig=new JsonConfig(); jsonConfig.setExcludes(new String[]{"orderProductList"}); //非字符串对象不予处理 jsonConfig.registerJsonValueProcessor(java.util.Date.class, new DateJsonValueProcessor("yyyy-MM-dd")); //处理日期 jsonConfig.registerJsonValueProcessor(ProductType.class,new ObjectJsonValueProcessor(new String[]{"id","name"}, ProductType.class)); //处理类别list对象 JSONArray rows=JSONArray.fromObject(productList, jsonConfig); JSONObject result=new JSONObject(); result.put("rows", rows); result.put("total", total); ResponseUtil.write(ServletActionContext.getResponse(), result); }この記事の事例を読んだ後は、あなたはそれをマスターしたと思います 方法、さらにエキサイティングな情報については、お問い合わせくださいphp 中国語 Web サイトの他の関連記事にも注目してください。 推奨読書:
履歴を使用して Ajax で前方/後退/更新をサポートできるようにする
Ajax メソッドを使用してフォームフォームの送信を実装する
以上がAjaxを使用する場合、Json-libはどのように処理しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。