使用 JSON 数据填充表单

Posted 2023-05-09

【中文标题】使用 JSON 数据填充表单

【英文标题】：Populating form with JSON data

【发布时间】：2018-07-17 00:39:51

【问题描述】：

我需要使用生成的 JSON 数据填充表单。页面 rangen.php 生成一个名为 $student 的数组，然后将其编码为 JASON。

<?php

// Randomly generate data for a student and return it as JSON data

// possible random first names
$firstname = array("Kevin", "John", "Sally", "Larissa", 
                   "Zhang", "Li", "Ying", "Wang",
                   "Nayla", "Nawal", "Abdul", "Yasin");

// possible random last names
$lastname = array("Browne", "Black", "Smith", "Yendt",
                  "Wei", "Fang", "Patel", "Lee",
                  "Abaza", "Shadid", "Hatem", "Hassin");

// random generation of tuition
$tuition = rand(2800, 7956);

// random generation of a student id
$studentid = 
  "0" . rand(0, 9) . rand(0,9) . rand(0,9) . rand(0,9) .
  rand(0,9) . rand(0,9) . rand(0,9) . rand(0,9);

// possible payment methods
$paymentmethods = array("Credit", "Debit", "Bitcoin");

// create random student based on arrays, randomness
$student = 
  array(
    "firstname" => $firstname[rand(1,count($firstname)) - 1],
    "lastname" => $lastname[rand(1, count($lastname)) - 1],
    "tuition" => $tuition,
    "studentid" => $studentid,
    "method" => $paymentmethods[rand(1, count($paymentmethods)) - 1]
  );

// send back a student as JSON data
echo json_encode($student);

?>

页面 form.php 使用 $.post() 向 rangen.php 发出 AJAX 请求，然后它应该将表单设置为生成的值，我使用 .val() 来执行此操作。点击Random按钮调用函数。

$(document).ready( function () 
            $("#rand").click(
                function () 
                    var student = $.post("rangen.php", "firstname" : "$firstname", "lastname" : "$lastname",
                            "tuition" : "$tuition", "studentid" : "$studentid", "method" : "$paymentmethods",
                        function(data)
                            for(/*subject in data*/var i=0; i<data.length; i++)
                                $("#name1").val(data[0]);
                                $("#name2").val(data[1]);
                                $("#id_1").val(data[3]);
                                $("#tuition_1").val(data[2]);
                                $("#payment_1").val(data[4]);
                            
                        ,
                        "json"); //Stores the requested JSON data.

                    console.log(student);
                
            )
        
    );

使用console.log() 表明请求已通过，但是当我尝试设置表单值时没有任何反应。

<form action="form.php" method="post" id="payment_form">
    First Name <br>
    <input type="text" name="fname" id="name1"> <br>
    Last Name <br>
    <input type="text" name="lname" id="name2"> <br>
    Student ID <br>
    <input type="text" name="student_id" id="id_1"> <br>
    Tuition <br>
    <input type="text" name="tuition" id="tuition_1"> <br>
    Payment Method <br>
    <select name="payment" id="payment_1">
        <option value="Credit">Credit</option>
        <option value="Debit">Debit</option>
        <option value="Bitcoin">Bit Coin</option>
    </select> <br>

    <input type="submit" value="Submit">
    <input type="button" value="Random" id="rand">
    <input type="button" onclick="log()" value="Log">
</form>

【问题讨论】：

你试过data.d吗？像 data,d.length 和 data.d[0]

@umer data.d 到底是什么？我没有为此使用 C#。

【参考方案1】：

在这种情况下data是一个关联数组，需要data["studentid"]或data.studentid访问，就不需要for循环了。

$(document).ready( function () 
            $("#rand").click(
                function () 
                    var student = $.post("rangen.php", "firstname" : "$firstname", "lastname" : "$lastname",
                            "tuition" : "$tuition", "studentid" : "$studentid", "method" : "$paymentmethods",
                        function(data)
                            //for(/*subject in data*/var i=0; i<data.length; i++)
                                $("#name1").val(data["firstname"]);
                                $("#name2").val(data["lastname"]);
                                $("#id_1").val(data["studentid"]);
                                $("#tuition_1").val(data["tuition"]);
                                $("#payment_1").val(data["method"]);
                             //
                        ,
                        "json"); //Stores the requested JSON data.

                    console.log(student);
                
            )
        
    );