Ajax-jQuery_Ajax_实例 ($.ajax、$.post、$.get)

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了。

推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,

地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/

$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()

一、$.ajax的一般格式

$.ajax({

type: ‘POST‘,

url: url ,

data: data ,

success: success ,

dataType: dataType

});

二、$.ajax的参数描述

参数 描述

url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType
可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script 或 html)。

三、$.ajax需要注意的一些地方:

1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。

2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

 

四、$.ajax我的实际应用例子

 1 //1.$.ajax带json数据的异步请求
 2 var aj = $.ajax( {
 3     url:‘productManager_reverseUpdate‘,// 跳转到 action
 4     data:{
 5              selRollBack : selRollBack,
 6              selOperatorsCode : selOperatorsCode,
 7              PROVINCECODE : PROVINCECODE,
 8              pass2 : pass2
 9     },
10     type:‘post‘,
11     cache:false,
12     dataType:‘json‘,
13     success:function(data) {
14         if(data.msg =="true" ){
15             // view("修改成功!");
16             alert("修改成功!");
17             window.location.reload();
18         }else{
19             view(data.msg);
20         }
21      },
22      error : function() {
23           // view("异常!");
24           alert("异常!");
25      }
26 });
27
28
29 //2.$.ajax序列化表格内容为字符串的异步请求
30 function noTips(){
31     var formParam = $("#form1").serialize();//序列化表格内容为字符串
32     $.ajax({
33         type:‘post‘,
34         url:‘Notice_noTipsNotice‘,
35         data:formParam,
36         cache:false,
37         dataType:‘json‘,
38         success:function(data){
39         }
40     });
41 }
42
43
44 //3.$.ajax拼接url的异步请求
45 var yz=$.ajax({
46      type:‘post‘,
47      url:‘validatePwd2_checkPwd2?password2=‘+password2,
48      data:{},
49      cache:false,
50      dataType:‘json‘,
51      success:function(data){
52           if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间
53           {
54                textPassword2.html("<font color=‘red‘>业务密码不正确!</font>");
55                $("#validatePassword2").val("pwd2Error");
56                checkPassword2 = false;
57                return;
58            }
59       },
60       error:function(){}
61 });
62
63
64 //4.$.ajax拼接data的异步请求
65 $.ajax({
66     url:‘<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action‘,
67     type:‘post‘,
68     data:‘merName=‘+values,
69     async : false, //默认为true 异步
70     error:function(){
71        alert(‘error‘);
72     },
73     success:function(data){
74        $("#"+divs).html(data);
75     }
76 });

另一个例子:

$.ajax({
    url:‘/comm/test1.php‘,
    type:‘POST‘, //GET
    async:true,    //或false,是否异步
    data:{
        name:‘yang‘,age:25
    },
    timeout:5000,    //超时时间
    dataType:‘json‘,    //返回的数据格式:json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr)
        console.log(‘发送前‘)
    },
    success:function(data,textStatus,jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){
        console.log(‘错误‘)
        console.log(xhr)
        console.log(textStatus)
    },
    complete:function(){
        console.log(‘结束‘)
    }
})
时间: 2024-08-26 09:22:27

Ajax-jQuery_Ajax_实例 ($.ajax、$.post、$.get)的相关文章

AJAX 请求实例

AJAX ASP/PHP 实例 下面的例子将为您演示当用户在输入框中键入字符时,网页如何与 web 服务器进行通信: 请在下面的输入框中键入字母(A - Z): 姓氏: 实例解释 - showHint() 函数 当用户在上面的输入框中键入字符时,会执行函数 "showHint()" .该函数由 "onkeyup" 事件触发: function showHint(str) { var xmlhttp; if (str.length==0) { document.get

Ajax 使用实例

在介绍实例之前,先就AJAX的几种便捷形式作出说明. Ajax传输Data时有四种常用的数据类型,分别是html文档.Json数据.js文件和Xml文档,四种数据类型对应着如下方法: 数据形式 方法 适用情况 HTML 形式 $().load(a,b)   适用于对数据没什么操作的情况,如简单的文本拼接等 Json 形式 $.getJSON(a,b) 特点是格式清晰,数据较少,但对结构要求很精确,人工编写时要特别注意.适用于数据需要重用的情况,能在性能上得到显著提高. JS 形式 $.getSc

Ajax常用实例

摘录自:http://www.cnblogs.com/gaopeng527/p/4459622.html 1. 级联下拉列表 例1.1 级联下拉列表. (1)编写AjaxRequest.js文件,并将其保存到JS文件夹中.AjaxRequest.js的具体代码如下: var net = new Object(); //定义一个全局变量net //编写构造函数 net.AjaxRequest=function(url,onload,onerror,method,params){ this.req

AJAX和JSON—ajax

AJAX简介 (1)AJAX是一种用于创建快速动态网页的技术.AJAX=异步JavaScript 和 XML:(2)AJAX 是异步交互,局部刷新:(3)AJAX能减少服务器压力:(4)AJAX 能提高用户体验: AJAX使用 AJAX实现异步交互,是通过XMLHttpRequest对象实现的.除了IE5和IE6,目前所有浏览器均支持XMLHttpRequest对象(IE5 和 IE6 使用 ActiveXObject).在创建对象时需要进行判断.XMLHttpRequest用于在后台与服务器交

AJAX遮罩实例

function checksite() { var site_list=$("textarea[name='Oldsite']").val(); if(site_list=="") { alert('IT CANNOT BE EMPTY!'); return false; } ajaxStar("SEARCHING..."); $.ajax( { type:"post", url:"transip.asp"

MVC Ajax.BeginForm 实例

在<head>引用 <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 在<body>编辑HTML //指定提交到Home控制器下的Login方法//HttpMethod 指定提交方式为Post//OnSucce

原生Ajax 和Jq Ajax

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: <!doctype html> <html> &

php的ajax简单实例

很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈. 为了防止我自己忘记,现在把这个简单的实例记录下.这个实例是网上搜的,文末附上链接. 首先你得有自己的服务器,这个我已经采用xampp配置好了. 实现ajax需要三个文件,一个是html的表单文件,一个是js的核心文件,一个是php的后台文件.具体的文件如下所示: 下面的是test.html文件,当键盘按下时触发showHint方法,在showHint方法中会有ajax的核心内容,实例化,获取地址,获取数

AJAX简单实例

<script type="text/javascript"> $(document).ready(function(){ $("#ajaxButton").click(function(){ htmlObj=$.ajax({ url:"ajax.do", type:"get", data:{articleId:3}, async:false, success: function(data) { alert(dat

简单的Ajax应用实例

从网页前端输入提示范围内的字符,然后显示从后台返回的结果 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> function showHint(str) { var xmlhttp; if (str.length==0) {