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

回答

相关问题