jQuery AJAX (异步基础)

学习要点

• Ajax概述
• load()方法
• $.get()和$.post()
• $.getScript()和$.getJSON()
• $.ajax()方法
• 表单序列化

AJAX 异步

不用提交表单就能发送数据。做到无刷新动态刷新页面.

load()方法

jquery采用了三层封装，最底层的封装方法：最底层的封装方法:$.ajax()而通过这层封装了第二层有三种方法.load(),$.get()和$.post()最高层是$.getScript()和$.getJSON()方法

.load()方法可以传递三个参数

• url(必须，参数类型String)
• data(可选，发送的键值对,发送的类型obj)
• callback(回调函数,类型function)

    $(function(){
        $("#btn1").click(function(){
            $("#div2").load("jquery第一次.html");
        })
    })

$.getScript()和$.getJSON()

jQuery提供了一组用于特定的异步加载方法。$.getScript()用于加载特定的JS文件
$.getJSON()用于加载JSON文件

• 有的时候我们需要能够在特定的情况下加载JS文件，而不是一开始把所有JS文件都加载了。这个时候就会用到$.getScript()

$("#btn1").click(function(){
  $.getScript("text.js");
})

$.getJSON()方法是用于专门加载JSON文件的。使用方法和之前类似

    $(function(){
        $("#btn1").click(function(){
             $.getJSON('index.json',function(result){
                    console.log(result);
    $("#div2").html(JSON.stringify(result));
             })
        })
    })

$.ajax()

$.ajax是所有ajax最底层的方式,他的参数只有一个就是对象
使用方法

   $("#btn2").click(function(){
         $.ajax({
           type:"POST",
           url:"index.php",
           data:{
               user: $("#user").val(),
               name: $("#name").val()
              },
            success:function(result){
             console.log(JSON.parse(result));
            }   
         })
       
       })

PHP里面的方法

<?php
$name = $_POST["name"];
$user = $_POST["user"];
$result = array("name"=>$name,"user"=>$user);
echo json_encode($result);
?>

表单序列化

$("form").serialize() 这样省得一个个拷贝拼接

具体见代码

    $(function(){
        
        $("#btn1").click(function(){
             $.getJSON('index.json',function(result){
                    console.log(result);
                    $("#div2").html(JSON.stringify(result));
             })
        })
            
       $("#btn2").click(function(){
         $.ajax({
           type:"POST",
           url:"index.php",
           data:$("form").serialize(),  //这样省得拼接
            success:function(result){
               console.log(JSON.parse(result));
            }   
         })
      
       })
    })