使用 Javascript 从 html FORM 发送帖子数据
Send post data from html FORM with Javascript?
我正在尝试从空操作发送帖子数据,并使用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
呢?
提前感谢!
你很幸运,因为有一个名为"Ajax"的JQuery函数可以为你处理这个问题!
您需要做的就是调用 JQuery,并使用如下代码:
$('#form_id').on('submit', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "/postinfo.php",
data: $(this).serialize(),
success: function() {
alert('success');
}
});
});
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" } );
试试这段代码。
<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>
<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>`
__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()
相关文章:
- 通过jQueryAjax一起发布Array和Form数据时出现问题
- 从Django中的Javascript Form访问GET Form数据
- Zend Form 1.x使用html5数据列表标签
- jQuery form 使用 TinyMCE 序列化 CodeIgniter 中缺少的数据
- jQuery Form插件,如何从php接收数据
- 使用 Javascript 从 html FORM 发送帖子数据
- 在 meteor.js 中通过邮件从 html-form 传输数据
- jQuery Form Validator - 如何使用 javascript 更改数据验证可选属性
- XMLHttpRequest multipart/form数据:multipart中的边界无效
- 使用jQuery Form插件上传文件时,如何提交额外数据
- 使用Gravity Form中的数据覆盖WooCommerce发送的数据
- Form在循环时在php中显示相同的数据
- nodejsPOST请求multipart/form数据,如何更改name属性
- jQuery表单插件:enctype:partipart/Form数据和文件上传-不返回JSON
- Ajax——不能将要发送的数据作为“;x-www-form-urlencoded”;
- 如何用ajax发送multipart/form数据请求
- 当Internet连接丢失时,在客户端PC上保存FORM数据
- 带有jquery.form.js的ie8和ie9返回html,而不是来自PHP的数据echo
- Adobe Acrobat Form,获取2种不同格式的数据
- 为什么我需要包含enctype="multipart/form-data"当通过表单发送数据时,但通