-
首先ajax的基本語法基礎。（必須得引入一個jquery文件，下面的例子展示用了網上的jquery文件，要聯網。）
2.請求成功(復制代碼運行觀察效果)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- <script src="./Public/Home/js/jquery.min.js"></script> --> </head> <body> <a id ="1" href="javascript:;">點我向后台發送ajax請求</a> </body> </html> <script> //jquery注冊點擊事件， //注意不要使用原生js的$("#1").on('click',function(){}); //使用jquery的$('#1').click(function(){}); //第一，js和jquery的方法不能呢混合使用。避免有些函數不通用。比如在這里用js的on()方式的話，return false是不起作用的，這個是阻止a鏈接跳轉的。網上搜"return false"便知。 //第二，盡量使用jquery的方法。jquery的方法是封裝js語句的，使用起來比較簡單，就比如這個ajax。 $('#1').click( function() { alert('hh');//這句是為了證明注冊點擊事件成功，有彈出就說明注冊成功。沒有彈出的話，檢查一下有沒有引入jquery的文件。這是jquery方法。 $.ajax({ //cache: false, //type: "GET",//重要參數1：請求的方式 url : "ajax_response.php",//重要參數2：請求的文件名 //請求成功執行的function success: function(msg){//重要參數3：msg是后台返回的數據，和js的reponsetext一樣，如果后台沒有返回數據則不會彈出。 alert("后台返回數據:"+msg); alert("請求成功"); }, //請求成功失敗執行的function error:function(){ alert("請求失敗"); } }); }); </script>
3.傳參數過去（復制代碼運行）
<!--ajax_request.html-->
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- <script src="./Public/Home/js/jquery.min.js"></script> --> </head> <body> <a id ="1" href="https://www.baidu.com/">點我向后台發送ajax請求</a> </body> </html> <script> //jquery注冊點擊事件， //注意不要使用原生js的$("#1").on('click',function(){}); //使用jquery的$('#1').click(function(){}); //第一，js和jquery的方法不能呢混合使用。避免有些函數不通用。比如在這里用js的on()方式的話，return false是不起作用的，這個是阻止a鏈接跳轉的。網上搜"return false"便知。 //第二，盡量使用jquery的方法。jquery的方法是封裝js語句的，使用起來比較簡單，就比如這個ajax。 // // // //第一部分： // 1.先看事件有沒有注冊成功，alert('hh');能彈出框就ok，里面是字符串，基本類型，跟c語言的printf("hh");一樣。 // 2.看是否請求成功。 // 3.傳參數到后台。 $('#1').click( function() { alert('hh');//這句是為了證明注冊點擊事件成功，有彈出就說明注冊成功。沒有彈出的話，檢查一下有沒有引入jquery的文件。這是jquery方法。 $.ajax({ cache: false, type: "GET",//重要參數1：請求的方式 url : "ajax_response.php?id=1&num=8",//重要參數2：請求的文件名 //請求成功執行的function success: function(msg){//重要參數3：msg是后台返回的數據，和js的reponsetext一樣，如果后台沒有返回數據則不會彈出。 alert("后台返回數據:"+msg); alert("請求成功"); }, //請求成功失敗執行的function error:function(){ alert("請求失敗"); } }); return false;//重要語句：如果是像a鏈接那種有href屬性注冊的點擊事件，可以阻止它跳轉。 //就是return后面的語句都不執行了，所以他就不能跳轉了。 }); </script>
//ajax_response.php
<?php // echo"OK"; $id = $_GET['id']; $number = $_GET['num']; echo "$number"; ?>
其他舉例。
第一種：只是想請求后台，不用傳參數過去。案例舉例：購物車頁面中的商品數量修改
$reduce.click(function () { var $inputVal = $(this).next('input'), $count = parseInt($inputVal.val())-1, $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'), $price = $(this).parents('.order_lists').find('.price').html(), //單價 $priceTotal = $count*parseInt($price.substring(1)); if($inputVal.val()>1){ $inputVal.val($count); $priceTotalObj.html('￥'+$priceTotal); //這里添加ajax到后台的代碼 var href = $(this).attr('href'); $.ajax({ cache: false, type: "GET", url : href, // traditional:true, // data: {order : serializeStr}, //注意這里的寫法 success: function(msg){ if(msg=="OK"){ // Alert(50,"刪除成功"); // location.reload(); }else{ alert(msg); alert("刪除失敗"); } } }); } if($inputVal.val()==1 && !$(this).hasClass('reSty')){ $(this).addClass('reSty'); } totalMoney(); return false; });
第二種，需要傳參數過去，比如id。案例：購物車頁面的移除商品。
此例又特殊一點，點擊a鏈接不是立即跳轉到它的href值的url，而是先彈出一個提示框，確定后才開始請求后台。
//確定按鈕，移除商品
$('.dialog-sure').click(function () {
$order_lists.remove();
if($order_content.html().trim() == null || $order_content.html().trim().length == 0){
$order_content.parents('.cartBox').remove();
}
closeM();
$sonCheckBox = $('.son_check');
totalMoney();
//添加到后台刪除的ajax,地址為#fuzhu的值
var href = $('#fuzhu').val();
$.ajax({
cache: false,
type: "GET",
url : href,
// traditional:true,
// data: {order : serializeStr}, //注意這里的寫法
success: function(msg){
if(msg=="OK"){
Alert(50,"刪除成功");
location.reload();
}else{
alert(msg);
alert("刪除失敗");
}
}
});
})