Question

我是Javasript的初学者。现在我试图向我的php服务器发出http请求，这将返回一个像这样的Json响应：

{
  "error": false,
  "user_id": 1,
  "user": {
    "username": "abc",
    "email": "abc@gmail.com",
    "http://192.168.1.1/abc/v1/profilepic/defaultmale.jpg"
  }
}

我按照以下方式进行Ajax调用，但是我的浏览器没有得到任何响应，因为我看到它没有做任何事情。

到目前为止我尝试了什么

   <script type="text/javascript">

    $(document).ready(function () {
        $("#loginBtn").click(function () {

            var vEmail = $("#email").val();
            var vPassword = $("#password").val();

            if(vEmail ==='' &&vPassword === ''){
                alert("please enter email and password");
            }else if(vEmail !== '' && vPassword===''){
                alert("password required");
            }else if(vEmail ==='' && vPassword !== ''){
                alert("email required");
            }else{

                $.post("http://localhost/abc/v1/login",
                    {email:vEmail, password:vPassword},
                    function(response){ // Required Callback Function
                        //"response" receives - whatever written in echo of above PHP script.
                        alert(response);
                    }
                );


            }

        });
    });
</script>

我无法在我的浏览器中获得alert，我也尝试了console.log(response)，我也无法在我的谷歌浏览器inspect element中看到。

我也尝试过以下，也没有运气

var obj = $.parseJson(response);
alert(obj['user_id']);

我需要知道的事情

1）这是通过Jquery发出Http请求的正确方法吗？如果不是，那么正确的方法是什么？

2）我如何测试我是否成功获得了响应？是否可以打印出来进行测试？

3）如何使用Jquery正确解析Json？

感谢您提前。

更新我也添加了失败功能，但当我填写email和password时，它仍然没有发生（意味着浏览器只是刷新，没有警报，控制台日志只是空白）。

$.post("http://localhost/abc/v1/login",
                {email:vEmail, password:vPassword},
                function(response,status){ // Required Callback Function
                    //"response" receives - whatever written in echo of above PHP script.
                    alert(JSON.stringify(response));

                },fail(function () {
                    alert("failed");
                })
            );

有人能告诉我正确的方法吗？

更新

在关注@Mendax回答之后，我在console.log中得到了这个回复的响应。这意味着什么？

错误

Object {readyState: 0, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}

Answer 1

尝试以JSON字符串形式发送数据。还要添加fail回调以捕获错误

    $.post("http://localhost/abc/v1/login",
        JSON.stringify({email:vEmail, password:vPassword}),
        function(response){ // Required Callback Function
            //"response" receives - whatever written in echo of above PHP script.
            console.log(response);
        }, "json").fail(function(error) { console.log(error) });;

要测试您是否收到回复，可以访问控制台中的newtwork标签，或添加fail回调功能。
要解析JSON您可以使用JSON.parse()。

Answer 2

请尝试使用此方法在jquery中发送请求和获取响应。这里的表单是Form方法，其中输入控件是实时的，电子邮件/密码是文本框ID。还要确保您传递的Url在传递参数时是响应。

 $.post( "http://localhost/abc/v1/login", {email:form.email.value, 
  password:form.password.value })
 .done(function( data ) {
   alert(JSON.stringify(data));
 });

Answer 3

如果您的回复为json格式，请$.post中的JSON参数，

$.post("http://localhost/abc/v1/login",{email:vEmail, password:vPassword}, function(response){ // Required Callback Function
    //"response" receives - whatever written in echo of above PHP script.
    alert(response);
},'json');// pass json parameter here

此外，请检查浏览器的控制台并确保您的AJAX请求正确，并且服务器端没有错误。

Answer 4

在$ .post方法中传递data type，如：

               $.post("http://localhost/abc/v1/login",
                    {email:vEmail, password:vPassword},
                    function(response){ // Required Callback Function
                        //"response" receives - whatever written in echo of above PHP script.
                        alert(response);
                    },'json'// Data type to output json format
                );

这将有效

无法使用Jquery从Api接收Json响应

4 个答案: