Javascript 使用AJAX和Jquery从MySQL中弹出表单字段

我按照教程修改了代码。在这里，我试图在提供“ID”值时用AJAX自动填充表单字段。我是Jquery新手，无法使用此代码

编辑1：在测试代码时，Jquery不会阻止表单提交和发送AJAX请求。

HTML表单

<form id="form-ajax" action="form-ajax.php">
    <label>ID:</label><input type="text" name="ID" /><br />
    <label>Name:</label><input type="text" name="Name" /><br />
    <label>Address:</label><input type="text" name="Address" /><br />
    <label>Phone:</label><input type="text" name="Phone" /><br />
    <label>Email:</label><input type="email" name="Email" /><br />
    <input type="submit" value="fill from db" />
</form>

而不是

event.preventDefault(); 

以阻止表单提交，但表单仍不起作用。知道我做错了什么吗？

Jquery

jQuery(function($) {

// hook the submit action on the form
$("#form-ajax").submit(function(event) {
    // stop the form submitting
    event.preventDefault();

    // grab the ID and send AJAX request if not (empty / only whitespace)
    var IDval = this.elements.ID.value;
    if (/\S/.test(IDval)) {

        // using the ajax() method directly
        $.ajax({
            type : "GET",
            url : ajax.php,
            cache : false,
            dataType : "json",
            data : { ID : IDval },
            success : process_response,
            error: function(xhr) { alert("AJAX request failed: " + xhr.status); }
        });


    }
    else {
        alert("No ID supplied");
    }
};


function process_response(response) {
    var frm = $("#form-ajax");
    var i;

    console.dir(response);      // for debug

    for (i in response) {
        frm.find('[name="' + i + '"]').val(response[i]);
    }
}

});

Ajax.php

if (isset($_GET['action'])) {
if ($_GET['action'] == 'fetch') {
    // tell the browser what's coming
    header('Content-type: application/json');

    // open database connection
    $db = new PDO('mysql:dbname=test;host:localhost;', 'xyz', 'xyz');

    // use prepared statements!
    $query = $db->prepare('select * from form_ajax where ID = ?');
    $query->execute(array($_GET['ID']));
    $row = $query->fetch(PDO::FETCH_OBJ);

    // send the data encoded as JSON
    echo json_encode($row);
    exit;
 }
}

---

我看不出您在哪里将json响应解析为javascript对象（哈希）。这应该会有所帮助。看起来您并没有使用jquery发布表单，而是试图发出get请求。要使用jquery正确提交表单，请使用以下内容：

$.post( "form-ajax.php", $( "#form-ajax" ).serialize() );

另外，您是否尝试过向表单元素添加id属性

<input type="text" id="name" name="name"/>

---

如果这不是一个解决方案，您可以发布从您的请求返回的json吗

将提交输入替换为按钮：

<button type="button" id="submit">

---

frm.find（'[name=“'+i+'”]）

返回一个数组。这就是为什么

.val（）

无法在输入字段中放置值的原因。很抱歉，我无法理解这是如何返回数组的。请详细说明。我在

data:data，

中找不到这个

data

是从哪里来的？@code jaff我已经纠正了它。@DeveloperVidit OK，它是一个类似数组的对象。。。试试这样的方法：

var name=frm.find（'[name=“'+i+']”）$（名称[0]）.val（'text'）。。。。阅读更多内容。是否有必要将json响应解析为javascript对象？我直接使用了echo json_编码，并使用了来自控制台的响应。应该返回的JSON是：{“ID”：“123”，“Name”：“Test Only”，“Address”：“123 Smith Street Jonestown 2000 NSW”，“Phone”：“0123456789”，“Email”：test@example.com“}如果您能够以javascript对象的形式访问它（我不知道您到底遇到了什么错误），那么使用元素ID可能会对您很好。只需将id属性设置为与name属性类似，我的建议应该有效，但是jQuery并没有阻止表单提交和发送AJAX请求。提交表单时，它被重定向到“form ajax.php”。你知道我错在哪里吗？看起来你没有使用jquery发布表单。我对答案进行了编辑，包括如何使用ajax+jquery发布表单。我不想发布表单，我想阻止表单发布，并发出ajax请求，将数据带到表单中并自动填充表单。
var element = $('#'+element_id);

<button type="button" id="submit">

$(document).ready(function() {
    $("#submit").on("click", function(e) {
          $.ajax({type:"get",
                  url: "ajax.php",
                  data: $("#form-ajax").serialize(),
                  dataType: "json",
                  success: process_response,
                  error: function(xhr) { alert("AJAX request failed: " + xhr.status); }
           });
    });
});