1

我试图弄清楚如何在提交表单时触发更新而不实际离开页面。我知道使用 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>

但这是在黑暗中的真实拍摄 - 它没有奏效。

谁能指出我正确的方向？（除阅读手册外）。

4

1 回答 1

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

当你用标记你的问题时，如果你想沿着这条路线走，你可以使用；

$('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...
    });
});
于 2013-11-10T16:49:01.527 回答