javascript - 无需超出页面即可更新数据库

Question

我正在尝试弄清楚如何在提交表单时触发更新，而无需实际走出页面。我知道用 javascript 是可能的，并且我一直在尝试找出方法。

现在表单由两部分构建，Reg.php 和 Update.php

Reg.php 是:

    <form action="update.php" method="post">
        <div class="input-group">
            <span class="input-group-addon">Title:    </span>
            <input type="text" class="form-control" placeholder="title" name="title"><br/>
        </div>
        <div class="input-group">
            <span class="input-group-addon">Content</span>
            <textarea class="form-control" rows="3" name="desc"></textarea></br>
            <!--<input type="text" class="form-control" placeholder="desc" name="desc">-->
        </div>
        <div class="input-group">
            <span class="input-group-addon">Push</span>
            <input type="text" class="form-control" placeholder="push" name="push"><br/>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Send</button>
    </form>

update.php 是:

<?php
    require 'connection.php';
    $sql="INSERT INTO `newsUpdate` (`title` ,`desc` ,`pushContent`) VALUES ('$_POST[title]','$_POST[desc]','$_POST[push]')";
    if (!mysqli_query($con,$sql))
    {
        die('Error: ' . mysqli_error($con));
    }
    echo "1 record added";
?>

所以(自然地)，在表单发送详细信息后，我在新页面(update.php)上收到“已添加 1 条记录”通知，但相反 - 我希望一切都在“Reg.php”上完成"包括状态报告(错误/添加 1 条记录)

我尝试创建一个基本的 JS 脚本并在单击按钮时触发它

function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("POST","update.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send();
    }
</script>

但这确实是在黑暗中进行的尝试 - 但没有成功。

有人能指出我正确的方向吗？ (除了阅读手册)。

Answer 1

看起来你已经快到了；您只需在 XHR 请求中表示您想要发送的数据(通过将字符串传递给 send() 方法即可。

function createPostString(form) {
    var str = '';

    for (var i=0;i<form.elements.length;i++) {
        var curr = form.elements[i];

        str += encodeURIComponent(curr.name) + '=' + encodeURIComponent(curr.value) + '&';
    }

    return str;
}

然后将您的 xmlhttp.send() 更改为 xmlhttp.send(createPostString(document.getElementsByTagName("form")[0])); (或者您可以想要选择您的表单)。

您尚未在代码中包含点击处理程序，但请确保使用 return false; 结束处理程序，以停止通过传统 HTTP POST 提交页面。

您还可以添加一个完整的处理程序来在 AJAX 请求完成后执行某些操作；

xmlhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        // do something with this.responseText.
    } 
};

<小时/>

正如您用 jquery 标记您的问题一样，如果你想走那条路，你可以使用；

$('button[type="submit"]').on('click', function (e) {
    e.preventDefault();

    jQuery.post("update.php", $('form').serialize()).done(function (data) {
        // Do something when the request has completed...
    });
});