zoukankan      html  css  js  c++  java
  • Ajax学习总结(2)——Ajax参数详解及使用场景介绍

    一、定义和用法

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

    AJAX 是一种用于创建快速动态网页的技术。

    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

    ajax请求的常用的5个步骤如下:1.创建 XMLHTTPRequest对象;2.注册回调函数;3.设置和服务器端的连接信息;4.发送数据;5.接受响应数据

    二、写法示例

    该参数规定 AJAX 请求的一个或多个名称/值对。

    $.ajax({})的第一种写法,success,error

    $.ajax({ 
    	type: "post", 【以POST或GET的方式请求。默认GET。PUT和DELETE也可以用,有的浏览器不支持】 
    	url: url, 【请求的目的地址,须是一个字符串。】
            contentType: "application/json", 【以哪种数据类型发送请求】
            data: data, 【请求的数据】 
    	dataType: "json", 【想从服务器得到的数据类型。html,json,jsonp,text】 
    	async:false,【默认为true异步请求,设置为false时为同步请求】 
    	beforeSend:function{......}, 【传递异步请求之前的事件】 
    	success:function{......}, 【请求成功之后的回调】
    	 error:function{......}, 【请求失败之后的回调】
    	 complete(function{......}, 【不管请求成功还是错误,只要请求完成,可以执行的事件。】
     });

    $.ajax({})的第二种写法,总结为回调写法.done,.fail

    $.ajax({ 
    	type: "post", 
    	url: url, 
    	contentType: "application/json",
    	 data: '{
    		 "requestData": {
    			 "SysId": 1,
    			 "SysType": "rzrq"
    		}
    	}',
    	 dataType: "json", 
    }).done(function (data) {
    	 console.log(JSON.parse(data)); 
    	eventManger.trigger("showMergeLiCategorySuccess", data); 
    }).fail(function (msg) {
    	 console.log(JSON.parse(msg)); 
    	eventManger.trigger("requestFailure", msg);
     });

    三、其他参数如下:

    Ajax最详细的参数解析和场景应用

    dataType,类型:String

    预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

    Ajax最详细的参数解析和场景应用

    contentType,发送请求数据类型

    四、用ajax实现表单提交

    <form id="formTest">

    <select name="single">

    <option>Single</option>

    <option>Single2</option>

    </select>

    <select name="multiple" multiple="multiple">

    <option selected="selected">Multiple</option>

    <option>Multiple2</option>

    <option selected="selected">Multiple3</option>

    </select>

    <input type="checkbox" name="check" value="check1"/> check1

    <input type="checkbox" name="check" value="check2" checked="checked"/> check2

    <input type="radio" name="radio" value="radio1" checked="checked"/> radio1

    <input type="radio" name="radio" value="radio2"/> radio2

    </form>

    那么用jQuery来做Ajax提交就这样

    $(function { $('#submit').click(function { $.ajax({ url: '你的提交url地址', type: 'post', dataType:'json' data: $("#formTest").serializeArray,//serializeArray方法会自动将表单转换为json对象 success: function(msg) { } }); }); });

    // 比如你有如下的html结构

    <form> ... <input type="submit" id="submit" value="提交"> </form>

    // jquery代码

    $(function { $('#submit').click(function { $.ajax({ url: '', method: 'post', data: {}, success: function (msg) { } }); // 别忘记了这句 return false; }); });
  • 相关阅读:
    面向对象编程思想-组合模式
    原生JS:Array对象详解
    一些XMLHttpRequest的例子代码
    详细解读XMLHttpRequest(一)同步请求和异步请求
    深入理解:JavaScript原型与继承
    轻松掌握:JavaScript状态模式
    轻松掌握:JavaScript装饰者模式
    轻松掌握:JavaScript享元模式
    轻松掌握:JavaScript模板方法模式
    回调函数的意义以及python实现
  • 原文地址:https://www.cnblogs.com/zhanghaiyang/p/7212711.html
Copyright © 2011-2022 走看看