jquery中的ajax请求到php（学生笔记）

首先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("删除失败");
}
}
});
})