AJAX調用PHP數組 - 使用jQuery/JSON

所以我有一個PHP數組中的默認值數組文件（backend.php）有多個功能和行爲。我只想用act =「default」來定位數組。我需要採用編碼的json php數組並使用它填充和html表單。AJAX調用PHP數組 - 使用jQuery/JSON

html頁面 - frontend.html

<html> 
    <head> 
    </head> 
    <body> 
     <h1>Form Validation</h1> 
     <form id="PersonForm"> 
      Name: 
       <input id="name" type ="text" name="name"></input> 
       <br><br> 
      Postal Code: 
       <input id="postal" type ="text" name="postal"></input> 
       <br><br> 
      Phone Number: 
       <input id="phone" type ="text" name="phone"></input> 
       <br><br> 
      Address: 
       <input id="address" type ="text" name="address"></input> 
       <br><br> 
      <input type="submit"></input> 
     </form> 
     <div id= "content"></div> 
     <a href="frontend.html">Refresh</a> 
     <a id="InsertDefault" href="#">Insert Default Data</a> 
     <br><br> 
     <ul id="errors"></ul> 
     <p id="success"></p> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
     <script src="main.js" type="text/javascript"></script> 
    </body> 
</html>

PHP頁面 - backend.php

<?php 
if ($_REQUEST['act'] == 'default'){ 
    $defaultData = array(
     'name' => "Jane", 
     'postal' => "L5B4G6", 
     'phone' => "9055751212", 
     'address' => "135 Fennel Street" 
    ); 
    echo json_encode($defaultData); 
} 
else if... 
?>

main.js頁面（這裏的錯誤）

$(document).ready(function() 
{ 
    $("#InsertDefault").click(function() 
    {  
    // make an AJAX call here, and place results into the form 
    $(document).ready(function(){ 
    $('#content').load('backend.php', {'default':'defaultData'}, //this format 
    function(){ $('#content').html('these are the default values')} 
    ); 

    // prevents link click default behaviour 
    defaultData.preventDefault(); 
    return false; 
    }); 


    $("#PersonForm").submit(function() 
    { 
    // Clear any success or error messages 
    $("#success").html(""); 
    $("#errors").empty(); 
    // make an AJAX call here, and set error or success accordingly 
    // prevents submit button default behaviour 
    return false; 
    }); 
});

來源

2015-12-07 Moderator Stefan

什麼是實際錯誤？另外，在main.js結尾處有一個流浪字符' – pmahomme

'所有'javascript'塊必須被重寫，在'document.ready'內的'click'處理程序中有'document.ready'。。此外，'submit'處理程序的形式在click處理程序中。 –

我假設點擊你想從php腳本加載默認值？ json字符串。它是否正確？ –

使用$.ajax或$.post將更好，因爲$.load將設置所選返回數據（應該是文本或HTML）的內容。在你的情況下，你想返回json，這樣你就可以設置表單元素的值。

$(document).ready(function() 
{ 
    $("#InsertDefault").click(function(e) 
    { 
     // prevents link click default behaviour 
     e.preventDefault(); 
     // make an AJAX call here, and place results into the form 
     $.ajax({ 
      url: 'backend.php', 
      type: 'post', 
      data: { 
       act:'default' 
      }, 
      dataType: 'json', 
      success: function(data) { 
       // set the form values 
       $('[name=name]').val(data.name); 
       $('[name=postal]').val(data.postal); 
       $('[name=phone]').val(data.phone); 
       $('[name=address]').val(data.address); 
       // display message 
       $('#content').html('Fields filled in with default values'); 
      }, 
      error: function() { 
       // handle your error 
       console.log('error'); 
      } 
     }); 
     return false; 
    }); 

    $("#PersonForm").submit(function() 
    { 
     // Clear any success or error messages 
     $("#success").html(""); 
     $("#errors").empty(); 
     // make an AJAX call here, and set error or success accordingly 
     // prevents submit button default behaviour 
     return false; 
    }); 
});

由於您的AJAX調用期待JSON回報，你需要使用header('Content-Type: application/json');在你的PHP腳本來設置數據類型。

使用輸出緩衝（請參見下面的ob_start()和ob_clean()）也是一個好主意，這樣php輸出的任何通知都不會使您的AJAX調用期望的json變髒。

ob_start(); 
if (isset($_POST['act'])) 
{ 
    if ($_POST['act'] == 'default') 
    { 
     ob_clean(); 
     header('Content-Type: application/json'); 
     $defaultData = array(
      'name' => "Jane", 
      'postal' => "L5B4G6", 
      'phone' => "9055751212", 
      'address' => "135 Fennel Street" 
     ); 
     echo json_encode($defaultData); 
     exit(); 
    } 
}

來源

2015-12-07 22:54:28 Tristan

謝謝我今天犯了一些愚蠢的錯誤，你做得很好。 –

AJAX調用PHP數組 - 使用jQuery/JSON

回答

相關問題