使用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