一个jquery-ajax post例子ajax 登陆

index.html文件
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>jQuery Ajax 实例演示</title>

</head>

<script src="js/jquery-1.6.4.js" type="text/java script"></script>

<script type="text/javascript">

$(document).ready(function(){//这个就是jQueryready,它就像C语言的main 所有操作包含在它里面

$("#button_login").mousedown(function(){

login(); //点击ID为"button_login"的按钮后触发函数 login();

});

});

function login(){ //函数 login();

alert("login");

var username = $("#username").val();//取框中的用户名

var password = $("#password").val();//取框中的密码

$.ajax({ //一个Ajax过程

type: "post",  //以post方式与后台沟通

url : "admin/login.action", //与此php页面沟通

dataType:'json',//从php返回的值以 JSON方式 解释

data:  'username='+username+'&password='+password, //发给php的数据有两项,分别是上面传来的u和p   

success: function(json){//如果调用php成功

//alert(json.username+'\n'+json.password); //把php中的返回值(json.username)给 alert出来

$('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的返回值显示在预定义的result定位符位置

}

});

}





//$.post()方式:

$('#test_post').mousedown(function (){

alert("post");

$.post(

'admin/login.action',

{

username:$('#username').val(),

password:$('#password').val()

},

function (data) //回传函数

{

var myjson='';

eval('myjson=' + data + ';');

$('#result').html("姓名1:" + myjson.username + "<br/>密码1:" + myjson.password);

}

);

});

 

//$.get()方式:

$('#test_get').mousedown(function ()

{

$.get(

'admin/login.action',

{

username:$('#username').val(),

password:$('#password').val()

},

function(data) //回传函数

{

var myjson='';

eval("myjson=" + data + ";");

$('#result').html("姓名2:" + myjson.username + "<br/>密码2:" + myjson.password);

}

);

});

}

</script>

<body>

    <div id="result"

        style="background: orange; border: 1px solid red; width: 300px; height: 200px;"></div>

    <form id="formtest" action="" method="post">

        <p>

            <span>输入姓名:</span><input type="text" name="username" id="username" />

        </p>

        <p>

            <span>输入密码:</span><input type="text" name="password" id="password" />

        </p>

    </form>

    <button id="button_login" >ajax提交</button> <button onclick="login()">ajax提交2</button>

    <button id="test_post">post提交</button>

    <button id="test_get">get提交</button>

</body>

</html>

 

login.php文件

<?php

echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password']));

?>

jQuery中ajax和post处理json的不同

 近日在做门户的用户评论时,好长时间没有用jquery了正好用一下,没想到偷工用了post方法去处理ajax回调的json数据,死活取不到,后台就是有json返回了。不料这么小小一个问题挂了我好几个小时,后来我ajax方法处理,居然OK,一比较发现原来post方法回调json必须eval一下,而ajax方法做了默认处理了。 望各位小心。。。

 

[javascript] view plain copy print ?
  1. function haha() {  
  2.     jQuery.post("addComment!comment.action",  
  3.      function aa(data) {  
  4.           data = eval(data);//POST方法必加,ajax方法自动处理了   
  5.           alert(data[0].userId);  
  6.           alert(data[0].userName);  
  7.     },  
  8.     "json"  
  9.     );  
  10.       
  11.     jQuery.ajax({  
  12.         type:"post",  
  13.         url:"addComment!comment.action",  
  14.         dataType:"json",  
  15.         success: function aa(data) {  
  16.               alert(data[0].userId);  
  17.               alert(data[0].userName);  
  18.         }  
  19.     });  
  20. }  
function haha() {

	jQuery.post("addComment!comment.action",

	 function aa(data) {

		  data = eval(data);//POST方法必加,ajax方法自动处理了

		  alert(data[0].userId);

		  alert(data[0].userName);

	},

	"json"

	);

	

	jQuery.ajax({

		type:"post",

		url:"addComment!comment.action",

		dataType:"json",

		success: function aa(data) {

			  alert(data[0].userId);

			  alert(data[0].userName);

		}

	});

}

 

 

后台:

  1.     public String comment() {  
  2.         try{  
  3.         User u = new User("user""koko");  
  4.         list = new ArrayList<User>();  
  5.         list.add(u);  
  6.         //map.put("id", userId);   
  7. //      JSONObject jb = JSONObject.fromObject(list); // name:"+userName +",   
  8. //      info = jb.toString();   
  9.         System.out.println(list);  
  10.         }  
  11.         catch (Exception e) {  
  12.             e.printStackTrace();  
  13.         }  
  14.         return SUCCESS;  
  15.     }  
	public String comment() {

		try{

		User u = new User("user", "koko");

		list = new ArrayList<User>();

		list.add(u);

		//map.put("id", userId);

//		JSONObject jb = JSONObject.fromObject(list); // name:"+userName +",

//		info = jb.toString();

		System.out.println(list);

		}

		catch (Exception e) {

			e.printStackTrace();

		}

		return SUCCESS;

	}

 

配置:

  1.     <package name="ajax" extends="json-default">  
  2.         <action name="addComment" class="org.test.action.CommentAction">  
  3.         <result type="json">  
  4.            <param name="root">list</param>  
  5.         </result>  
  6.         </action>  
  7. 。。。。。。  

jquery ajax  

2011-09-13 13:10:20|  分类: ajax |  标签: |字号 订阅

 
 

本文地址: jQuery Ajax 全解析

本文作者:QLeelulu

转载请标明出处!

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。

废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件,例如表单。

示例代码:

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",         function (responseText, textStatus, XMLHttpRequest){         this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]             //alert(responseText);//请求返回的内容         //alert(textStatus);//请求状态:success,error         //alert(XMLHttpRequest);//XMLHttpRequest对象 });

 

这里将显示结果。

 

注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。

 

2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求

参数:

url (String) :  发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

 

 

 

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){                 //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.                 this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图                 alert(data);                 //alert(textStatus);//请求状态:success,error等等。                                   当然这里捕捉不到error,因为error的时候根本不会运行该回调函数                 //alert(this);         });

点击发送请求:

jQuery.get()回调函数里面的 this ,指向的是Ajax请求的选项配置信息:

 

3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求

 

参数:

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

 

 

 

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

Ajax.aspx:

Response.ContentType = "application/json"; Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");
jQuery 代码:
$.post("Ajax.aspx", { Action: "post", Name: "lulu" },         function (data, textStatus){             // data 可以是 xmlDoc, jsonObj, html, text, 等等.             //this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this             alert(data.result);         }, "json");

点击提交:

这里设置了请求的格式为"json":

如果你设置了请求的格式为"json",此时你没有设置Response回来的ContentType 为:Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。

注意一下,alert(data.result); 由于设置了Accept报头为“json”,这里返回的data就是一个对象,并不需要用eval()来转换为对象。

 

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件

参数

url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。

 

jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码:

加载并执行 test.js。

jQuery 代码:

$.getScript("test.js");


加载并执行 AjaxEvent.js ,成功后显示信息。

jQuery 代码:

$.getScript("AjaxEvent.js", function(){         alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同?"); });

 

加载完后请重新点击一下上面的 Load 请求看看有什么不同。

jQuery Ajax 事件

Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件:局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的,例如:

$.ajax({    beforeSend: function(){      // Handle the beforeSend event    },    complete: function(){      // Handle the complete event    }    // ...  });

全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义:

$("#loading").bind("ajaxSend", function(){    $(this).show();  }).bind("ajaxComplete", function(){    $(this).hide();  });

或者:

$("#loading").ajaxStart(function(){    $(this).show();  });

我们可以在特定的请求将全局事件禁用,只要设置下 global 选项就可以了:

$.ajax({    url: "test.html",    global: false,// 禁用全局Ajax事件.    // ...  });

下面是jQuery官方给出的完整的Ajax事件列表:

  • ajaxStart (Global Event)
    This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
    • beforeSend (Local Event)
      This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
    • ajaxSend (Global Event)
      This global event is also triggered before the request is run.
    • success (Local Event)
      This event is only called if the request was successful (no errors from the server, no errors with the data).
    • ajaxSuccess (Global Event)
      This event is also only called if the request was successful.
    • error (Local Event)
      This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
    • ajaxError (Global Event)
      This global event behaves the same as the local error event.
    • complete (Local Event)
      This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
    • ajaxComplete (Global Event)
      This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
  • ajaxStop (Global Event)
    This global event is triggered if there are no more Ajax requests being processed.

    具体的全局事件请参考API文档。
    好了,下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax();  

     

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

    $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

    注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。
    当设置 datatype 类型为 'script' 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。

    $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。

    jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。(这个我不是很懂)

    参数列表:

                                        
    参数名 类型 描述

    这里有几个Ajax事件参数:beforeSend success complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
    请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。

    示例代码,获取博客园首页的文章题目:

    $.ajax({         type: "get",         url: "http://www.cnblogs.com/rss",         beforeSend: function(XMLHttpRequest){             //ShowLoading();         },         success: function(data, textStatus){             $(".ajax.ajaxResult").html("");             $("item",data).each(function(i, domEle){                 $(".ajax.ajaxResult").append("
  • "+$(domEle).children("title").text()+"
  • ");             });         },         complete: function(XMLHttpRequest, textStatus){             //HideLoading();         },         error: function(){             //请求出错处理         } });
  •  

    这里将显示首页文章列表。

     

     

    其他

    jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。

    设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。

    jQuery 代码:

    $.ajaxSetup({   url: "/xmlhttp/",   global: false,   type: "POST" }); $.ajax({ data: myData });

     

    serialize() 与 serializeArray()

    serialize() : 序列表表格内容为字符串。

    serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

    示例:

    HTML代码:

    <p id="results"><b>Results: b> p> <form> <select name="single"> <option>Singleoption> <option>Single2option> select> <select name="multiple" multiple="multiple"> <option selected="selected">Multipleoption> <option>Multiple2option> <option selected="selected">Multiple3option> select><br/> <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>

    serializeArray() 结果为:

     

    一些资源

    一个jQuery的Ajax Form表单插件:http://www.malsup.com/jquery/form/

    一个专门生成Loading图片的站点:http://ajaxload.info/   大家觉得那些Loading比较炫的可以在这里跟帖晒一下,方便大家取用,嘎嘎

jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求

参数:

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

Ajax.aspx:

Response.ContentType  =   " application/json " ;Response.Write( " {result: ' "   +  Request[ " Name " +   " ,你好!(这消息来自服务器)'} " );
jQuery 代码:
$.post( " Ajax.aspx " , { Action:  " post " , Name:  " lulu "  },     
   
function  (data, textStatus){        
    
//  data 可以是 xmlDoc, jsonObj, html, text, 等等.  
     // this;
     //  这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this  
   alert(data.result);        },  " json " );

点击提交:

这里设置了请求的格式为"json":


$.ajax()这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

这里有几个Ajax事件参数: beforeSend success complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。

 

复制代码
$.ajax({
url: 
' stat.php ' ,

type: 
' POST ' ,

data:{Name:
" keyun " },

dataType: 
' html ' ,

timeout: 
1000 ,

error: 
function (){alert( ' Error loading PHP document ' );},

success: 
function (result){alert(result);}

});
复制代码

 

//add by Q at 2008.11.25

今天遇到一个jquery的post的小问题

因为要批量删除,所以开始用循环的post到那个url,然后刷新本页

这就出现问题了

 

复制代码
$( " input[@name='qa_checkbox'] " ).each( function ()
{
    
if ($( this ).attr( ' checked ' ==  undefined)
    {
                
    }
    
else
    {
        $.post(url,{Action:
" POST " }, function (data){alert(data);window.location.reload();},  " text " );
                
    }
})
复制代码


这么用的话 只能删除第一条数据;

 

复制代码
$( " input[@name='qa_checkbox'] " ).each( function ()
{
    
if ($( this ).attr( ' checked ' ==  undefined)
    {
                
    }
    
else
    {
        $.post(url
+ $( this ).val(),{Action: " POST " }, function (data){alert(data);},  " text " );
                
    }
})

window.location.reload();
复制代码

 

这样用的话,虽然可以删除,也能刷新本页,貌似reload是在post的function之前运行,但是post会报错,其中原因有待研究;

最终想了折中的办法 

复制代码
$( " input[@name='qa_checkbox'] " ).each( function ()
        {
            
if ($( this ).attr( ' checked ' ==  undefined)
            {
                
            }
            
else
            {
                url 
=  url  +  $( this ).val()  +   ' _ ' ;
                
            }
        })
        $.post(url,{Action:
" POST " }, function (data){alert(data);window.location.reload();},  " text " );
    }
复制代码

 

把要删除的id连成字符串,用一次post处理,把reload放在post的function里 就没有问题了

你可能感兴趣的:(jquery)