从Body请求中包含payload的表单发起Post请求
Initiate a Post request from a form with paylod in the Body request
我有以下问题。我有一个web服务,它接受post请求,请求体中有一些json数据,并且还返回json数据。现在我想构建一个用户友好的HTML页面来测试这个服务。我有一个表单来填写数据,当用户单击按钮时,JSON应该从表单数据和post到我的web服务中构建,响应应该显示给用户。我该怎么做呢?
jQuery是你的好朋友,看看ajax部分…有很多函数可以伪造请求并直接从表单中获取数据。http://api.jquery.com/jquery.ajax/
这是一个示例,但它需要MySQL数据库和PHP由您的提供商支持。
jQuery$('#form').on('submit', function(e) {
e.preventDefault();
var data = $(this).serialize();
$.POST('path_to_php_file.php', data, function(response) {
$('#container').append(response);
});
}
PHP <?php
$db = new PDO('mysql:host=localhost;dbname=DATABASENAME;charset=utf8', USERNAME, PASSWORD);
//the post variables equal the name attribute on your input element in html: <input name="THIS">
$text = $_POST['text'];
$name = $_POST['name'];
if(isset($text) && isset($name)) {
$stmt = $db->prepare("INSERT INTO table_name (text, name) VALUES (?, ?)");
$stmt->execute(array($text, $name));
echo "Successfully saved.";
} else echo "There was an error.";
$db = null;
另一个选择,如果你只是想测试你的webservice,是使用postman,一个友好的chrome扩展,用于测试web api。
否则,你甚至不需要jQuery。同步帖子很容易编写:
var button = document.getElementById("submit");
button.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "yourwebservice.com/your-web-service", false);
xhr.send("{'json_string':['goes'],['here']}");
alert(xhr.response);
}
相关文章:
- mootools表单json post请求
- 如何在Angularjs中模拟HTML表单请求
- 在表单上注入javascript以发送post请求
- 在此服务器上找不到请求的-表单验证(位于localhost端口80的Apache/2.4.9(Win32)PHP/5.5
- 在 Angular2 中构建多部分/表单数据 POST 请求并验证输入类型文件
- Ajax 请求后,以正常方式提交表单
- Ajax POST请求没有html表单,并且是纯JS
- Symfony2将ajax请求数据传递给表单呈现控制器
- 每当表单输入字段发生更改时,都会发送一个ajax请求
- 使用expressjs将post请求中的表单输入注入get请求中
- 使用“GET”的客户端请求表单,即使定义了“POST”.javascript iframe是原因吗
- 从Ajax请求中查询Ajax表单
- jQuery:$.ajax() 重定向到其 URL 表单操作参数,而不是对表单操作执行 AJAX 请求
- 通过 AJAX 请求提交 HTML 表单
- asp.net MVC 的客户端验证“潜在危险的请求表单...”
- 如何使编码简单的请求表单验证
- IIS的请求.表单和JavaScript XMLHTTPRequest不工作在Firefox和Chrome
- Ajax请求表单在CSS弹出
- 业务催化剂:是否可以提交密码检索请求表单并通过AJAX显示结果密码检索确认页面?
- Ajax请求表单提交问题