Question

我正在试图弄清楚如何在提交表单时触发更新而不实际超出页面。我知道用javascript可以实现这一点。我一直想弄清楚如何。

现在，表单由2部分构建，即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脚本并触发它onClick按钮

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

无需离开页面即可更新数据库

1 个答案: