使用jQuery ajax和php的简单hello世界不起作用

Question

我正在尝试使用jQuery和Ajax创建一个简单的hello world ，以从同一文件夹中的php获取响应。

jQuery代码是：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
    rel="stylesheet" type="text/css">
    <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
    rel="stylesheet" type="text/css">

    <script type="text/javascript">
        function jsonIt(){
            var x = document.getElementById("input1").value; 
            var y = document.getElementById("input2").value; 

            var obj = '{'
                       +'"id" : "'+x+'",'
                       +'"name" : '+y+''
                       +'}';

            var person = {
                id:x,
                name:y
            }; 

            var str_json = JSON.stringify(person);

            $.ajax({
                type: 'get',
                url: 'a.php',
                dataType: 'text', 
                data: obj,
                success: function(data) {
                    alert(data);
                },
                error: function(e){
                        console.log(e.message);
                        //alert('error');
                    }
            });
            alert("Pause");
        }


    </script>
</head>

<body>
    <div class="section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <div class="col-sm-2">
                                <label for="inputEmail3" class="control-label">Email</label>
                            </div>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="input1" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2">
                                <label for="inputPassword3" class="control-label">Password</label>
                            </div>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="input2" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">Remember me</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default" onclick="jsonIt()">Sign in</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

简单来说，使用HTML进行调用：

<button type="submit" class="btn btn-default" onclick="jsonIt()">Sign in</button>

在同一文件夹中名为a.php的php是：

<?php echo "Helo world"; ?>

因此，当我单击调用函数jsonIt()的按钮时，将得到以下响应：“ [object XMLDocument]”，而不是Hello world。

可能是什么？

EDITED

修改后，标头代码将为：

<head>

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
            <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
            <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        ...

         <script type="text/javascript">
            $(document).ready(function() {

                function jsonIt(){


                    $.ajax({
                        method: 'get',
                        url: 'a.php',
                        done: function(data) {
                            alert(data);
                        },
                        fail:function( jqXHR, textStatus ) {
                            console.log( "Request failed: " + textStatus );
                        }
                    });

                    //alert("Pause");
                }

                $(document).on('click', 'button[type="submit"]', function(e) {
                     e.preventDefault(); // prevents the default click action
                     jsonIt();
                });
            });


        </script>
    </head>

和按钮的标记类似：

<button type="submit" class="btn btn-default" >Sign in</button>

但是它仍然返回“ [object XMLDocument]”，而不是“ Hello world”。

Answer 1

如果要在页面顶部添加jQuery脚本，则需要用文档就绪处理程序将它们包围起来：

<script type="text/javascript">
$(document).ready(function() {
    function jsonIt(){
            $.ajax({
                method: 'GET',
                url: 'a.php',
                //url: 'http://practica00.tk/a.php',
                dataType: 'text'
            })
            .done(function(data) {
                    alert(data);
                })

            .fail (function( jqXHR, textStatus ) {
                    console.log( "Request failed: " + textStatus );
                });
        alert("Pause");
    }

    $(document).on('click', 'button[type="submit"]', function(e) {
        e.preventDefault(); // prevents the default click action
        jsonIt();
    });
});
</script>

准备好文档的处理程序可确保在jQuery运行并附加其事件处理程序之前已加载所有DOM。 如果您没有包装准备好的文档处理程序，则jQuery可能会尝试将事件处理程序和方法附加到尚未加载到DOM中的项目 。

您实际上不应该使用内联JavaScript来调用函数，尤其是因为您有可用的jQuery。 如果您要去，则仍需要阻止默认操作。

<button type="submit" class="btn btn-default" onclick="jsonIt(); return false;">Sign in</button>

如果您想使用jQuery进行点击，则可以从按钮中删除嵌入式JavaScript，并将以下内容添加到jQuery代码中：

 $(document).on('click', 'button[type="submit"]', function(e) {
     e.preventDefault(); // prevents the default click action
     jsonIt();
});

我不确定为什么要使用JSON字符串执行任何操作，因为您没有在查询中的任何地方使用它。 您永远不会定义obj ，因此您不应该发送它。

编辑：我已经更新了我的答案，以反映使用的jQuery版本的更正确的AJAX返回方法。

弃用通知：从jQuery 1.8开始，不再使用jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回调。 要准备将其最终删除的代码，请改用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）。

如果您想做一个简单的“ hello world”，那么在添加任何复杂性之前，应删除所有偏离目标的代码。

另外：要执行AJAX（因此需要执行PHP），您必须从运行中的Web服务器（本地主机或测试主机）执行代码，在此处可以正确执行所有操作。

使用jQuery ajax和php的简单hello世界不起作用

问题描述

1 个解决方案

解决方案1
4 已采纳 2015-06-29 18:07:10

使用jQuery ajax和php的简单hello世界不起作用

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-06-29 18:07:10

解决方案1
4 已采纳 2015-06-29 18:07:10