Question

所以我在php数组中有一个默认值数组，文件（backend.php）有多个函数和行为。我想用act =“default”来定位数组。我需要使用编码的json php数组并使用它填充和html表单。

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;
  });  
});

Answer 1

最好不要使用.load，而是使用$.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返回，您需要在php脚本中使用header('Content-Type: application/json');来设置数据类型。

使用输出缓冲也是一个好主意（请参阅下面的ob_start()和ob_clean()），以便php输出的任何通知都不会弄脏您的AJAX调用所期望的json。< / p>

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();
    }
}

AJAX调用PHP数组 - 使用jQuery / JSON

1 个答案: