演示：jQuery Ajax使用JSON調用PHP腳本返回

我已經試過本教程http://labs.jonsuh.com/jquery-ajax-php-json/，但它不工作，我完全按照方向行事。我認爲這是因爲return.php。演示：jQuery Ajax使用JSON調用PHP腳本返回

的index.html

<html> 
 
<head> 
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script type="text/javascript"> 
 
$("document").ready(function(){ 
 
    $(".js-ajax-php-json").submit(function(){ 
 
    var data = { 
 
     "action": "test" 
 
    }; 
 
    data = $(this).serialize() + "&" + $.param(data); 
 
    $.ajax({ 
 
     type: "POST", 
 
     dataType: "json", 
 
     url: "response.php", 
 
     data: data, 
 
     success: function(data) { 
 
     $(".return").json(
 
      "Favorite beverage: " + data["favorite_beverage"] + "<br />Favorite restaurant: " + data["favorite_restaurant"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"] 
 
     ); 
 

 
     alert("Form submitted successfully.\nReturned json: " + data["json"]); 
 
     } 
 
    }); 
 
    return false; 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<form action="return.php" class="js-ajax-php-json" method="post" accept-charset="utf-8"> 
 
    <input type="text" name="favorite_beverage" value="" placeholder="Favorite restaurant" /> 
 
    <input type="text" name="favorite_restaurant" value="" placeholder="Favorite beverage" /> 
 
    <select name="gender"> 
 
    <option value="male">Male</option> 
 
    <option value="female">Female</option> 
 
    </select> 
 
    <input type="submit" name="submit" value="Submit form" /> 
 
</form> 
 
    
 
<div class="return"> 
 
    [HTML is replaced when successful.] 
 
</div> 
 
</body> 
 
</html>

response.php

<?php 
if (is_ajax()) { 
    if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists 
    $action = $_POST["action"]; 
    switch($action) { //Switch case for value of action 
     case "test": test_function(); break; 
    } 
    } 
} 

//Function to check if the request is an AJAX request 
function is_ajax() { 
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'; 
} 

function test_function(){ 
    $return = $_POST; 

    //Do what you need to do with the info. The following are some examples. 
    //if ($return["favorite_beverage"] == ""){ 
    // $return["favorite_beverage"] = "Coke"; 
    //} 
    //$return["favorite_restaurant"] = "McDonald's"; 

    $return["json"] = json_encode($return); 
    echo json_encode($return); 
} 
?>

來源

2015-05-04 undercovermonkey

如果您檢查控制檯，你會看到什麼問題是，無論是JS錯誤停止發送請求，還是PHP錯誤，意味着響應不會回來。 –

我試過多次將return.php改成response.php。仍然無法正常工作 – undercovermonkey

你*是*在實際的服務器上運行這一切，對吧？在打開'<？php'標記error_reporting（E_ALL）後立即在文件頂部添加錯誤報告; ini_set（'display_errors'，1）;' –

這是你的HTML怎麼也看像...

HTML：

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript"> 
    $("document").ready(function(){ 
     $(".js-ajax-php-json").submit(function(){ 
     var data = { 
      "action": "test" 
     }; 
     data = $(this).serialize() + "&" + $.param(data); 
     $.ajax({ 
      type: "POST", 
      dataType: "json", 
      url: "response.php", 
      data: data, 
      success: function(data) { 
      $(".return").html(
       "Favorite beverage: " + data["favorite_beverage"] + "<br />Favorite restaurant: " + data["favorite_restaurant"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"] 
      ); 

      alert("Form submitted successfully.\nReturned json: " + data["json"]); 
      } 
     }); 
     return false; 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <form action="return.php" class="js-ajax-php-json" method="post" accept-charset="utf-8"> 
     <input type="text" name="favorite_beverage" value="" placeholder="Favorite restaurant" /> 
     <input type="text" name="favorite_restaurant" value="" placeholder="Favorite beverage" /> 
     <select name="gender"> 
     <option value="male">Male</option> 
     <option value="female">Female</option> 
     </select> 
     <input type="submit" name="submit" value="Submit form" /> 
    </form> 

    <div class="return"> 
     [HTML is replaced when successful.] 
    </div> 
    </body> 
    </html>

PHP保持不變爲response.php

神奇變化是

$(".return").json(....)

在成功回調

到

$(".return").html(....)

來源

2015-05-04 19:00:43

演示：jQuery Ajax使用JSON調用PHP腳本返回

回答

相關問題