Launching cross-domain AJAX requests with jquery's $.getjson

Source: Internet
Author: User

A common Getjson in jquery is to invoke and get 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. Yichuan County Second Secondary school

    • URL: Sending the requested address
    • Data: (optional) key/value parameter to be sent
    • Callback: (optional) callback function when loading succeeds

Primarily used by clients to obtain server JSON data. Simple example:

Server script that returns JSON data:

View Source print?
1 // $.getJSON.php
2 $arr=array("name"=>"zhangsan", "age"=>20);
3 $jarr=json_encode($arr);
4 echo$jarr;

Note two: first: Before returning to the client, use the PHP function Json_encode to encode the data to be returned. Second: ECHO is used instead of return to the client.

The following is the core client code:

View Source print?
01 <script language="javascript"type="text/javascript"src="./js/jquery.js"></script>
02 <script language="javascript"type="text/javascript">
03 functiongetjs()
04 {
05   $.getJSON("$.getJSON.php", {}, function(response){
06                  alert(response.age);
07   });
08 }
09
10 <input type="button"name="btn" id="btn" value="test"onClick="javascript:getjs();"/>

Since the value is returned in PHP with JSON encoding, it is necessary to use Getjson to invoke the PHP file to get the data. It can also be noted that the data obtained through Getjson has become an array of objects, which can be intuitively used to get the return value response.name,response.age.

jquery provides a $.getjson approach that allows us to implement cross-domain AJAX requests, but there is too little content on JQUERYAPI, how to use $.getjson to request that a Web site should return a database for $.getjson to get, I'll use a practical example to illustrate the following.

The backend is PHP, the following code is the main implementation of a function is to provide an appointment registration interface, need to pass in the data are: User name, contact number and address:

View Source print?
01 /*预约登记 执行 接口*/
02 case"yuyue_interface":
03     $name= trim($_GET[‘name‘]);
04     $phone= trim($_GET[‘phone‘]);
05     $addr= trim($_GET[‘addr‘]);
06     $dt= date("Y-m-d H:i:s");
07     $cb= $_GET[‘callback‘];
08     if($name== "" || $name== NULL){
09         echo$cb."({code:".json_encode(1)."})";
10     }elseif($phone== "" || $phone== NULL){
11         echo$cb."({code:".json_encode(2)."})";
12     }elseif($addr== "" || $addr== NULL){
13         echo$cb."({code:".json_encode(3)."})";
14     }else{
15         $db->execute("insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values (‘$name‘,‘$phone‘,‘$addr‘,‘$dt‘,0)");
16         echo$cb."({code:".json_encode(0)."})";
17     }
18     exit;
19 break;

Then there is the front-end processing:

View Source print?
01 $(document).ready(function(){
02     //以下3个为预约登记需要的参数
03     varname = "name";      //varchar类型,长度最多为8位(4个汉字)
04     varphone = "phone";    //varchar类型,长度为11位
05     varaddr = "addr";      //varchar类型,长度最多为500位(250个汉字)
06     $.getJSON("http://请求网站地址/data.php?ac=yuyue_interface&name="+name+"&phone="+phone+"&addr="+addr+"&callback=?", function(data){
07         if(data.code==1){
08             //自定义代码
09             alert("姓名不能为空");
10         }elseif(data.code==2){
11             //自定义代码
12             alert("手机不能为空");
13         }elseif(data.code==3){
14             //自定义代码
15             alert("所在单位不能为空");
16         }else{
17             //自定义代码
18             alert("预约成功");
19         }
20     });
21 });

It is important to note that in the backend PHP code, the "&callback=" must be passed in. "also lost, such as:

View Source print?
1 $cb= $_GET[‘callback‘];
2 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 for other people to cross-domain requests.

Launching cross-domain AJAX requests with jquery's $.getjson

Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.