Question

我尝试使用ajax向RESTFUL API提交表单请求，并在表单下方的div中显示响应。我有以下内容，但对于我所遗漏的内容却一片空白。用户应输入一个整数值，并接收类似于以下内容的JSON响应：

{
"status": {
    "code": 200,
    "description": "OK"
},
"entity": "sN0u7"

}

我需要显示"entity"值以及结果前面的静态网址。示例：http://www.url.com/sN0u7

HTML

<div class="row">
    <div class="col-lg-6">
        <div class="input-group"> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" id="encodeID" class="form-control" placeholder="Search by ID">
        </div>
    </div>
</div>
<div class="share-link well"></div>`

的jQuery

var name = $("#encodeID").val();
$.ajax({
    type: "POST",
    url: 'https://url.com/rest/v1/utils/guid/encode/' + 'encodeID',
    data: dataString,
    success: function (data) {
        $(".share-link").val(data);
    });
}
});
return false;

当前小提琴：Link

Answer 1

如果您希望在有人点击＆＃34; Go＆＃34;时执行ajax调用。按钮，你需要将一个单击处理程序附加到按钮，然后调用ajax代码（并且因为你想将一个处理程序附加到DOM元素，我建议将你的代码放在jQuery的DOM准备回调中以确保可以在附加处理程序之前选择元素：

$(function () {
  $('button.btn-default').click(function () {
    var name = $('#encodeID').val();
    $ajax(...);
  });
});

现在，您的代码将在用户完成任何操作之前尝试执行。此外，您可以考虑将输入放在表单元素中，并使用POST URL作为表单元素的操作。这个部分对于进行ajax调用是不必要的，但是理论上你的页面可以在没有JavaScript的情况下工作。

Answer 2

我看到几个语法错误，并且未处理click事件。使用实际网址尝试以下代码并尝试一次。

$(document).ready(function(){
$('button.btn-default').click(function(){
    var dataString = $("#encodeID").val();
    $.ajax({
        type: "POST",
        url: 'https://url.com/rest/v1/utils/guid/encode/' + dataString ,
        data: dataString,
        success: function (data) {
            $(".share-link").html(data);
        }
        });
    });
});

将ajax请求发送到API并使用jQuery显示响应

2 个答案: