Jquery cross domain request sample share of jquery send ajax requests

  • 2020-03-30 02:27:10
  • OfStack

GetJSON is commonly used in jQuery to invoke and retrieve a remote JSON string, convert it to a JSON object, and if successful, execute a callback function. The prototype is as follows:

JQuery. GetJSON (url, [data], [callback]) loads JSON data across domains.

Url: the address to which the request was sent
Data: (optional) to send key/value parameter
Callback: (optional) a callback function that loads successfully
It is mainly used for the client side to retrieve the server JSON data. Simple example:

Server script, return JSON data:


// $.getJSON.php
$arr=array("name"=>"zhangsan", "age"=>20); 
$jarr=json_encode($arr); 
echo $jarr;

Two points to note: first: before returning to the client, encode the data to be returned using the PHP function json_encode. Second: return to the client with echo instead of return.

Here is the core client code:


<script language="javascript" type="text/javascript" src="./js/jquery.js"></script> 
<script language="javascript" type="text/javascript"> 
function getjs() 
{ 
  $.getJSON("$.getJSON.php", {}, function(response){ 
                 alert(response.age); 
  }); 
}

<input type="button" name="btn" id="btn" value="test" onClick="javascript:getjs();"/>

Since the return value is encoded with JSON in PHP, you must call the PHP file with getJSON to get the data. At the same time, you can notice that the data obtained by getJSON has become an array of objects, and you can use response.name and response.age to get the return value intuitively.

Jquery provides the method of $.getjson, so that we can achieve cross-domain ajax requests, but the content on the API of jqueryis too little, how to use $.getjson, request website should return what kind of database to let $.getjson get, I will use a practical example to illustrate.

The back-end is in PHP. The following code mainly realizes a function of providing an interface for reservation and registration. The data to be passed in are: user name, contact number and address:



case "yuyue_interface":
 $name = trim($_GET['name']);
 $phone = trim($_GET['phone']);
 $addr = trim($_GET['addr']);
 $dt = date("Y-m-d H:i:s");
 $cb = $_GET['callback'];
 if($name == "" || $name == NULL){
  echo $cb."({code:".json_encode(1)."})";
 }elseif($phone == "" || $phone == NULL){
  echo $cb."({code:".json_encode(2)."})";
 }elseif($addr == "" || $addr == NULL){
  echo $cb."({code:".json_encode(3)."})";
 }else{
  $db->execute("insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values ('$name','$phone','$addr','$dt',0)");
  echo $cb."({code:".json_encode(0)."})";
 }
 exit;
break;

Then there is the processing of the front end:


$(document).ready(function(){
 //The following three parameters are required for reservation registration
 var name = "name";  //Varchar type with a maximum length of 8 bits (4 characters)
 var phone = "phone"; //Varchar type with a length of 11 bits
 var addr = "addr";  //Varchar type with a maximum length of 500 characters (250 characters)
 $.getJSON("http:// Request website address /data.php?ac=yuyue_interface&name="+name+"&phone="+phone+"&addr="+addr+"&callback=?", function(data){
  if(data.code==1){
   //Custom code
   alert(" The name cannot be blank ");
  }else if(data.code==2){
   //Custom code
   alert(" The phone cannot be empty ");
  }else if(data.code==3){
   //Custom code
   alert(" The unit cannot be empty ");
  }else{
   //Custom code
   alert(" Make an appointment success ");
  }
 });
});

Note that in the back-end PHP code, the "&callback=? "Also output, such as:


$cb = $_GET['callback'];
echo $cb."({code:".json_encode(4)."})";

The above is a simple $.getjson experiment, through which we can learn how to use $.getjson, and also learn how to make an interface to make cross-domain requests.


Related articles: