一個jquery-ajax post例子ajax 登錄 jQuery $.post $.ajax用法

時間  2019-12-06
標籤 一個 jquery ajax post 例子 登錄 用法 欄目 JQuery 简体版
原文   原文鏈接
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文件javascript

<?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);
		}
	});
}

 

 

後臺：php

[java] view plain copy print ?
  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;
	}

 

配置：html

[html] view plain copy print ?
  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 |  標籤： |字號大中小 訂閱java

 
 

本文地址: jQuery Ajax 全解析python

本文做者：QLeelulujquery

轉載請標明出處！ajax

jQuery確實是一個挺好的輕量級的JS框架，能幫助咱們快速的開發JS應用，並在必定程度上改變了咱們寫JavaScript代碼的習慣。json

廢話少說，直接進入正題，咱們先來看一些簡單的方法，這些方法都是對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請求的選項配置信息：

image

 

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"：

image

若是你設置了請求的格式爲"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>

    image

    serializeArray() 結果爲：

    image

     

    一些資源

    一個jQuery的Ajax Form表單插件：http://www.malsup.com/jquery/form/

    一個專門生成Loading圖片的站點：http://ajaxload.info/   你們以爲那些Loading比較炫的能夠在這裏跟帖曬一下，方便你們取用，嘎嘎

jQuery $.post $.ajax用法

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裏 就沒有問題了

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程