jQuery Ajax POST到GET JSON并返回值

时间:2017-03-20 11:47:03

标签: javascript php jquery json ajax

好的,我有一个php文件,当邮政编码为posted时,它会发送get请求以检索一些JSON数据。

JSON输出如下:

[{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":"1","HouseNumber":"48","Postcode":"G21BP"},{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":"3","HouseNumber":"48","Postcode":"G21BP"},{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":"2","HouseNumber":"48","Postcode":"G21BP"},{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":null,"HouseNumber":"46","Postcode":"G21BP"}]

我在print_r($result);页面上使用php来显示结果

修改

我的输出的HTML看起来像这样:

<html>
<head></head>
<body>
<pre>[{"AddressLine1":"Garelochhead","AddressLine2":null,"City":"Helensburgh","County":"Argyll And Bute","HouseName":null,"HouseNumber":"","Postcode":"G840EG"},{"AddressLine1":"Garelochhead","AddressLine2":null,"City":"Helensburgh","County":"Argyll And Bute","HouseName":"1","HouseNumber":"Flat 0","Postcode":"G840EG"},{"AddressLine1":"Garelochhead","AddressLine2":null,"City":"Helensburgh","County":"Argyll And Bute","HouseName":"1","HouseNumber":"Flat 1","Postcode":"G840EG"}]
</body>
</html>

我的JS目前看起来像吼叫:

$('.btnFind').click(function() {
	 var dataString;
	  $.ajax({ 		  
        url:baseUrl+'/postcode.php',
        type: 'post',
        datatype: "JSON",
        data: dataString,
        success: function() {
        //test
        }
        }).error (function() {
            alert('error with finding your address');
        }).complete (function(data) {
		     console.log(data);
		     //var AddressLine1 = data[0].AddressLine1,
				// AddressLine2 = data[0].AddressLine2,
				// City = data[0].City,
				 //County = data[0].County,
				// HouseName = data[0].HouseName,
				// HouseNumber = data[0].HouseNumber;
             alert(data[0].AddressLine1);
		  
        });     
					 });

但我一直收到以下错误:

Uncaught TypeError: Cannot read property 'AddressLine1' of undefined

我的猜测是print_r不合适,但说实话它已经有一段时间了,因为我使用了JSON,所以我不能在它上面做到公平。

如果它也有区别,那么它也可以在balnk html页面上打印。

按要求登录控制台

Object
abort
:
(a)
always
:
()
complete
:
()
done
:
()
error
:
()
fail
:
()
getAllResponseHeaders
:
()
getResponseHeader
:
(a)
overrideMimeType
:
(a)
pipe
:
()
progress
:
()
promise
:
(a)
readyState
:
4
responseText
:
""
setRequestHeader
:
(a,b)
state
:
()
status
:
200
statusCode
:
(a)
statusText
:
"OK"
success
:
()
then
:
()
__proto__
:
Object

4 个答案:

答案 0 :(得分:0)

使用JSON从PHP返回JavaScript:

header('Content-Type: application/json');
echo json_encode($data);

修改

另外,请确保您可以访问PHP脚本,我使用:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: X-Requested-With, content-type, access-control-allow-origin, access-control-allow-methods, access-control-allow-headers');

答案 1 :(得分:0)

在引用您的对象之前,应该欢迎该对象。 试试这个

data = JSON.parse(data);
alert(data[0].AddressLine1);

答案 2 :(得分:0)

var parsed = JSON.parse(data); 

var AddressLine1 = parsed[0].AddressLine1;

答案 3 :(得分:0)

感谢所有发帖和评论的人。

我刚刚意识到我犯了什么蠢事。我从来没有先把表格序列化。

当我应该var dataString;

时,我有var dataString = $("form").serialize();

总白痴我浪费了4个小时的时间来愚蠢的事情。

再次感谢大家的关注。