Question

我需要使用生成的JSON数据填充表单。 Page 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>

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

使用JSON数据填充表单

1 个答案: