使用Javascript从html FORM发送帖子数据？答案

【问题标题】：Send post data from html FORM with Javascript?使用Javascript从html FORM发送帖子数据？
【发布时间】：2013-10-20 10:54:47
【问题描述】：

我正在尝试使用空操作从 from 发送帖子数据，并使用 javascript 将信息发送到必须处理帖子信息的文件。

这是我的代码：

<HTML>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
            <script>    
    function post_to_url(path, params, method) {
        method = method || "post";

        var form = document.createElement("form");

        form._submit_function_ = form.submit;

        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for(var key in params) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }

        document.body.appendChild(form);
        form._submit_function_();
    }
    post_to_url("./postinfo.php", { submit: "submit" } );
        </script>   
<form method="post" onsubmit="return post_to_url()">
<input type="text" name="ime">
<input type="submit" id="submit" name="submit" value="Send">
</form>

那么我如何在我的 html 表单中使用带有空操作的 javascript 将帖子数据发送到 postinfo.php？

提前致谢！

【问题讨论】：

在您的代码中，您有 2 次调用 post_to_url - 一次发生在您定义函数之后，一次发生在提交表单时。我怀疑这可能会导致问题。

标签： javascript html forms post

【解决方案1】：

你很幸运，因为有一个名为“Ajax”的 JQuery 函数可以为你处理这个问题！

您需要做的就是调用 JQuery，并使用如下代码：

$('#form_id').on('submit', function(e){
    e.preventDefault();
    $.ajax({
       type: "POST",
       url: "/postinfo.php",
       data: $(this).serialize(),
       success: function() {
         alert('success');
       }
    });
});

【讨论】：

我已经尝试过了，但它并没有像 html 形式的 action="postinfo.php" 那样将我重定向到 postinfo.php。它也没有发出成功警报。我在我的帖子表单之前将您的代码完全粘贴在标记中，并将 id="form_id" 添加到我的表单中。能否请您接受我的代码并更改它的工作方式并向我展示？
您还没有安装 JQuery - 尝试将此行添加到您的标记中：<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
此外，异步表单提交的重点不是重定向您；这是执行后台任务。如果你想要重定向，为什么不直接提交没有任何 JS 的表单？
更具体地说，我认为 JSFiddle 被拒绝了，那么为什么不试试我在您的页面上制作的代码，看看是否可以？
大声笑，好吧 - 我希望它现在对你有用 :) 考虑到我的代码确实有效，你愿意投票并接受答案吗？

【解决方案2】：

function post_to_url(path, params, method) {
    method = method || "post";

    var form = document.createElement("form");


   _submit_function_ = form.submit;
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", params[key]);

        form.appendChild(hiddenField);
    }

    document.body.appendChild(form);
    form._submit_function_();
}
post_to_url("./postinfo.php", { submit: "submit" } );

改成

post_to_url("/postinfo.php", { submit: "submit" } );

【讨论】：

【解决方案3】：

试试这个代码。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">
    function validate() {
        var ra = document.getElementById("uname").value;
        var rag = document.getElementById("pwd").value;
        $.ajax({
       type: "POST",
        url: "/login",
            contentType: "application/json",
         dataType: 'json',
       data:JSON.stringify({
           username:ra,
           password:rag
       }),
       success: function() {
         alert('success');
       }
    });
        console.log(ra, rag)

    }
</script>
<html>
<form name="myform">
<p>ENTER USER NAME <input id="uname" type="text" name="username"></p>

    <p>ENTER PASSWORD <input type="password" id="pwd" name="pwd"></p>
<input type="button" value="Check In" name="Submit" onclick= "validate()">


</form>
</html>

【讨论】：

【解决方案4】：

<html>
<form action="{{ url_for('details') }}" method="post">
<p>ENTER NAME<input id="uname" type="text" name="username"></p>

    <p>ENTER DESIGNATION<input type="text" id="pwd" name="pwd"></p>
    <!--<P>ENTER EMAIL-ID</EMAIL-ID><input id="email" type="text" name="email-id"></P>-->
<input type="submit" value="Submit" name="Submit">


</form>
</html>`

【讨论】：

【解决方案5】：

 __author__ = 'raghavendra'
from flask import Flask, render_template, request, jsonify
import os
import sys
# os.environ.setdefault("DJANGO_SETTINGS_MODULE", "your_project.settings")
# sys.path.append(('/path/to/django/project'))
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('temp.html')

@app.route('/save',methods=['GET','POST'])
def details():

    a = request.form.get('username')
    b = request.form.get('pwd')
    print a, b

if __name__ == '__main__':
    app.run()

【讨论】：

这是用插件吗？这还是 JS 吗？