Question

我有以下问题。我有一个webservice，它在请求体中接受带有一些json数据的post请求，并且还返回Json数据。现在我想构建一个用户友好的HTML页面来测试这个服务。我有一个表单来填充数据，当用户单击按钮时，JSON应该从表单数据构建并发布到我的webservice，响应应该显示给用户。我如何实现这一目标？

Answer 1

jQuery是你的朋友，看看ajax部分...有一堆函数可以伪造请求并直接从你的表单中获取数据。 http://api.jquery.com/jquery.ajax/

Answer 2

这是一个示例这样做，但它需要您的提供商支持 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;

Answer 3

如果您只想测试您的网络服务，另一个选择是使用postman，这是一个友好的Chrome扩展程序，用于测试网络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);

}

从Body请求中的有效负载表单发起Post请求

3 个答案: