Ajax常用方式

简介:

一、基本用法(发送请求、接收返回值);

    1、js代码

    $.ajax( {

    type :"POST",url :"/text.action?name="+name+"&user.id="+id,//后面name/id为变量

    dataType :"json",async :false,

    success : function(result) {

         alert("result"+result);

       }

    });

      或者将url和参数分开写:

      url:"text.action", 

      type:"post", 

      data:{"user.id":id,"name":name},

    2、action配置

      extends="json-default"//pakage的继承属性

     <action name="test" class="societyPPSAction" method="test">

     <result type="json">

  <param name="root">result</param>

      </result>

     </action>

    3、action中代码

         private String result;

         public String test() {

                ......

                ......

                this.result="succ"; //可给result赋值json串     

              return SUCCESS;

          }


    相关定义:

    JSON:JavaScript 对象表示法(JavaScript Object Notation)。

    JSON 是存储和交换文本信息的语法。类似 XML。

    JSON 比 XML 更小、更快,更易解析。


二、json数据封装

    1、action中封装json格式的对象数组(转为字符串传输)

    List<Prize> list=prizeService.ajaxQueryList(prizes);

    JSONArray jArray=new JSONArray();

    if (list!=null&&list.size()>0) {

         for(Prize all:list){

             JSONObject object=new JSONObject();

             object.put("id", all.getId());

             object.put("name", all.getName());

             object.put("price", all.getPrice());

             jArray.add(object);

          }

      result=jArray.toString();

    }

    2、action中封装json格式的对象(含对象数组)

    JSONObject prizeJson=new JSONObject();
    prizeJson.put("allRow", pageBean.getAllRow());

    List<Prize> list=prizeService.ajaxQueryList(prizes);

    JSONArray jArray=new JSONArray();

    if (list!=null&&list.size()>0) {

         for(Prize all:list){

             JSONObject object=new JSONObject();

             object.put("id", all.getId());

             object.put("name", all.getName());

             object.put("price", all.getPrice());

             jArray.add(object);

          }

        prizeJson.put("prizeArray", jArray);

        result=prizeJson.toString();

    }

三、json数据解析

    1、js中解析json格式的对象数组的字符串

       success : function(result) {

         var jsonArray=eval(result);//随意定义一个变量接收解析后的json数组

         for(var i=0;i<jsonArray.length;i++){

            alert(jsonArray[i].id); 

            alert(jsonArray[i].name);

         }

       }

      方法说明:eval() 函数使用的是 JavaScript 编译器,可解析 JSON 字符串,然后生成JavaScript 对象。

    2、js中解析json格式的对象(含对象数组)的字符串

       //列表最下方默认显示加载中,滑到页面底部就能看到,并自动触发加载下一页。

       $("#currentPage").val(parseInt(currentPage)+1);//不要放在success里面,容易加载重复

       success : function(result) {

         var json=eval(result);//随意定义一个变量接收解析后的json对象

         alert(json.totalPage);

         

         var context="";

         for(var i=0;i<json.prizeArray.length;i++){

            alert(json.prizeArray[i].id); //prizeArray是在action中封装的对象数组。

            alert(json.prizeArray[i].name);

            context+='<dl class="display-box box-align" onclick="details('+jsonArray[i].wareId+')">';

           context+='...';

         }

        context+='<span id="loading">加载中...</span>';//滑到页面底部就能看到,另外加上触发

        $("#loading").remove() 

        $("#container").append(context);


       }

     3、java中解析json字符串:http://blog.csdn.net/zhejingyuan/article/details/9180885

        注:getJSONArray、getJSONObject 数组和对象之间相互获取。











本文转自 艺晨光 51CTO博客,原文链接:http://blog.51cto.com/ycgit/1619430,如需转载请自行联系原作者
目录
相关文章
|
前端开发
thymeleaf实现ajax请求的两种方式
thymeleaf实现ajax请求的两种方式
|
JSON 前端开发 JavaScript
Ajax请求服务端的五种方式
Ajax请求服务端的五种方式
|
前端开发
$.ajax()的实现方式
$.ajax()的实现方式
|
存储 JSON 前端开发
使用 ajax 的方式给 zTree 提供数据 | 学习笔记
快速学习使用 ajax 的方式给 zTree 提供数据
124 0
使用 ajax 的方式给 zTree 提供数据 | 学习笔记
|
XML JSON 前端开发
关于Ajax原理与使用方式,收藏这一篇文章就够了!!
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
关于Ajax原理与使用方式,收藏这一篇文章就够了!!
|
JSON 前端开发 Java
【Spring MVC】(四)Spring MVC响应视图(字符串的方式、ModelAndView 对象、JSON 数据)、统一异常处理(普通请求、AJAX 请求)
【Spring MVC】(四)Spring MVC响应视图(字符串的方式、ModelAndView 对象、JSON 数据)、统一异常处理(普通请求、AJAX 请求)
414 0
【Spring MVC】(四)Spring MVC响应视图(字符串的方式、ModelAndView 对象、JSON 数据)、统一异常处理(普通请求、AJAX 请求)
|
JSON 前端开发 JavaScript
Ajax请求服务端的五种方式
Ajax请求服务端的五种方式
107 0
|
XML 存储 缓存
Ajax之GET、POST请求方式
本文将详细地介绍使用 XHR 对象发送请求的两种方式 GET 和 POST。
248 0
|
数据采集 JSON 移动开发
常用的三种请求方式ajax,axios,fetch
常用的三种请求方式ajax,axios,fetch
504 0
|
JavaScript 前端开发 Python
Django中ajax技术和form表单两种方式向后端提交文件
一、Form表单方式提交: form表单提交文件或者图像时需要对form中的属性进行如下设置: 1、method="post" //提交方式 post 2、enctype="multipart/form-data" //不对字符编码。
1910 0