jQuery encapsulated ajax

$.get(url [,data] [,fn callback function] [, dataType]);

data: The data passed to the server, request string and json object can be set
fn: callback function, this function is called after the ajax request is completed, you can use this function Complete the subsequent processing of ajax
dataType: The server returns the data type, html, text, xml, json

Note: The ajax It is an asynchronous get request

##$.post(url[,data][,fn callback function][, dataType]);

This method is exactly the same as the $.get() method. The difference is that it is a post request.

$.ajax({ //json object

url: request address,

data: data passed to the server ,

dataType: Data returned from the server in the format of html, text, xml, json

type:get/post request method

success:function(){} ajax successful request The final callback function can be used for subsequent processing using

async:[true] asynchronous/false synchronous,

cache:[true] cache/false not cached,

} )

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        function f1(){
            //① $.get(url[,data,fn,dataType])
            //$.get('./1.php');
            
            //$.get('./1.php','name=tom&age=20',function(msg){
            //$.get('./1.php',{name:'小强',age:21},function(msg){
            //    alert(msg)
            //});

            $.get('/1.php',{name:'小明',age:21},function(msg){
                alert(msg.name+"--"+msg.age)
            },'json');

            //$.get('./1.php',function(msg){
                //ajax完成请求的“回调函数”
                //msg是自定义变量，代表从服务器返回的信息
            //    alert(msg);
            //});
        }

        function f2(){
            //$.ajax({url: data:  dataType:  type:get/post  success:})
            $.ajax({
                url:'/1.php',
                data:{name:'小方',age:21},
                dataType:'json',
                type:'get',
                success:function(msg){
                    //msg代表服务器返回的信息
                    alert(msg.name+"--"+msg.age);
                }
            });
        }
        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <h2>ajax请求</h2>
        <input type="button" value="请求1" onclick="f1()" />
        <input type="button" value="请求2" onclick="f2()" />
    </body>
</html>

php content is:

<?php
$name=$_GET['name'];
$age=$_GET['age'];
$arr =array(
    'name'=>$name,
    'age'=>$age
    );
echo json_encode($arr);
?>

Note: You can copy these two files locally and put them in one Folder for testing

new file

<!DOCTYPE html>
<html>
 <head>
 <title>php.cn</title>
 <meta charset="utf-8" />
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
 <script>
 function f1(){
 //① $.get(url[,data,fn,dataType])
 //$.get('./1.php');
 
 //$.get('./1.php','name=tom&age=20',function(msg){
 //$.get('./1.php',{name:'小强',age:21},function(msg){
 // alert(msg)
 //});

 $.get('/1.php',{name:'小明',age:21},function(msg){
 alert(msg.name+"--"+msg.age)
 },'json');

 //$.get('./1.php',function(msg){
 //ajax完成请求的“回调函数”
 //msg是自定义变量，代表从服务器返回的信息
 // alert(msg);
 //});
 }

 function f2(){
 //$.ajax({url: data: dataType: type:get/post success:})
 $.ajax({
 url:'/1.php',
 data:{name:'小方',age:21},
 dataType:'json',
 type:'get',
 success:function(msg){
 //msg代表服务器返回的信息
 alert(msg.name+"--"+msg.age);
 }
 });
 }
 </script>
 <style type="text/css">
 </style>
 </head>
 <body>
 <h2>ajax请求</h2>
 <input type="button" value="请求1" onclick="f1()" />
 <input type="button" value="请求2" onclick="f2()" />
 </body>
</html>

submit Reset Code

Automatic operation

Full Screen