ajax请求及参数解析

ajax请求适应有较少内容的请求实现，例如查询明细，保存明细，如果是大量的数据查询用ajax实现成本较高，最好用form表单提交。

1.用ajax实现查询表单

   1.1js

jQuery("#userQuery").bind("click", function () {
        var a = {
            name:name,
			numer:number
        };
        jQuery.ajax({
            type: "POST",
            url: "/rest/student/list",
            data: JSON.stringify(a),
            dataType: 'json',
            contentType: 'application/json',
            processData: false,
            cache: false,
            success: function (data) {
                if (data.success&&data.list!=null&&data.list!="") {
                        var studentHtml="";
                        var temp=data.list;
                        for (x in data.list) {
                            //遍历JSON格式的数组取元素, x代表下标
                            studentHtml+='<tr><td>'+temp[x].name+'</td>'+        '<td>'+temp[x].number+'</td>'+ '<td>'+temp[x].age+'</td>';
                        }

                    $("#userQuery").html(studentHtml);
                } else {
                    alert(data.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                  alert("服务器忙，请稍后再试");
            }
        });
    });

1.2.后端controller

   

@Controller
@RequestMapping("/student")
public class StudentController extends BaseControl{

     @Autowired
    StudentService studentService;
    
    private static final Logger logger= LoggerFactory.getLogger(StudentController.class);
    @RequestMapping("/list")
    @ResponseBody
    public String list(@ModelAttribute Student student,Model view){
        Map<String,Object> map=new HashMap<String,Object>(16);
        try {
            StudentQuery query = new StudentQuery();
            query.setName(student.getName());
            query.setNumber(student.getNumber);
            List<Student> students= studentService.search(query);
            map.put("list", students);
            map.put("success",true);
        } catch (Exception e) {
            logger.error("search student error", e);
        }
        Gson gson=new Gson();
        return gson.toJson(map);
    }
}

   1.3 ajax的参数解析

参数名称	类型	说明	举例
url	String	发送请求的地址
data	object类型 或String类型	object类型是key-value键值对	object类型：{name:"name",numer:"number"} String类型：JSON.stringify(a)
type	String	请求方式post或get	"post"
dataType	String 字符串类型	指ajax执行完成返回值的类型 xml：返回XML文档 html：返回纯文本HTML信息，包含的script标签会在插入DOM时执行 script：返回纯文本的JavaScript代码。 json:返回json数据。 jsonp：JSONP格式 text：返回纯文本字符串
contentType	ajax输入参数 的类型，与 dataType相对应	1."application/x-www-form-urlencoded" (默认值)，默认值可以设置contentType: false；默认值可以适合大部分的场合 2."application/json; charset=utf-8"  要求data必须是字符串：JSON.stringify(a) 3.当data为json格式{name:"name",numer:"number"},设置contentType: false
async	Boolean	true(默认），是异步请求。false，是同步请求。异步请求就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程和ajax块后面的脚本（另一个线程).同步请求在请求在请求发送出去会锁住浏览器，用户其他操作必须等待请求完成才可以执行。异步中，在ajax块内部是同步的，例如success内的代码是顺序执行的。 注意：跨域请求和dataType:"jsonp"请求不支持同步操作。
cache	Boolean	1.默认为true；指在第一次请求完成之后，如果地址和参数不变化，第二次去请求，会默认获取缓存中的数据，不去读取服务器端的最新数据。只对type为get的时候可能会使用。 2.设置为false；每次读取的是最新的数据，不从缓存理读取。  type:"post",每次提交的内容都不一样，所以cache:false
success	Function	请求成功后的回调函数，这个函数传递数据，并根据dataType解析数据，解析出的数据包括请求返回的状态及数据。	success: function (data) {                 if (data.success&&data.list!=null&&data.list!="") {                         var studentHtml="";                         var temp=data.list;                         for (x in data.list) {                             //遍历JSON格式的数组取元素, x代表下标                             studentHtml+='<tr><td>'+temp[x].name+'</td>'+        '<td>'+temp[x].number+'</td>'+ '<td>'+temp[x].age+'</td>';                         }                     $("#userQuery").html(studentHtml);                 } else {                     alert(data.msg);                 }             }
error	Function	失败的时候调用函数有3个参数，即XMLHttpRequest对象,错误信息和捕获错误的对象（可选）	error: function (XMLHttpRequest, textStatus, errorThrown) {                   alert("服务器忙，请稍后再试");             }