Question

所以我对ajax的jquery有点新意。基本上，页面发送一个http帖子，服务器端dll以json格式写一个页面响应。我试图弄清楚如何处理响应此响应。到目前为止，当我到达网站并填写所有信息并点击提交时，它会发布到iis webserver页面并处理请求并序列化为json格式并将HttpContext.Current.Response.Write返回到页面。该页面现在以json格式显示文本。

如何捕获此响应对数据进行处理并以更易读的格式将其显示在屏幕上。我需要在所有页面上执行这个isn jquery / ajax格式。

以下是我的完整HTML代码。大多数java脚本来自我发现的一个例子：

<HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
// variable to hold request
var request;
// bind to the submit event of our form
$("#frmLookup").submit(function(event){
// abort any pending request
if (request) {
    request.abort();
}
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// let's disable the inputs for the duration of the ajax request
$inputs.prop("disabled", true);

// fire off the request to /form.php
request = $.ajax({
    url: "http://server1/RWebService/users",
    type: "post",
    data: serializedData
});

// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR, json){
    // log a message to the console
    console.write("HELLO WORLD");

});

// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
    // log the error to the console
    console.error(
        "The following error occured: "+
        textStatus, errorThrown
    );
});

// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
    // reenable the inputs
    $inputs.prop("disabled", false);
});

// prevent default posting of form
event.preventDefault();
});
</script>
</head>

 <body>
    Look up user

    <form id="frmLookup" name="input" action = "http://server1/RWebService/users" method = "post" >
    BWS HostName:  <input type="text" name="wBWSHostName" value="foobar.com" />
    <BR>
    UserName:  <input type="text" name="wBWSUserName" value="admin" />
    <br />
    Password:  <input type="password" name="wBWSPassword" value="password"/>
    <BR>
    Lookup User: <input type="text" name="wUser" value="foo@bar.com"/>
    <input type="submit" name="wLookup" value="Lookup" />

    </form>

    <div id="data">

    </div>
</body>

</HTML>

Answer 1

使用回调done来处理response并在页面中完成工作。

编辑：我创建了一个小小提示，向您展示ajax的行为方式。您可以将其作为示例：http://jsfiddle.net/Jvzn5/

Answer 2

确保您实际上没有使用提交按钮等提交表单。您只想通过jQuery发布表单的数据。

变化：

<input type="submit"

要：

<input type="button" id="lookup-button"

阻止提交表单。

然后：

$("#frmLookup").submit(...

要：

$(document).ready(function () {
  $("#lookup-button").click(...
  ...
  ...
});

注意：你需要额外的}）;最后关闭$ {document）.ready（function（）{在DOM加载之后，用我所有的东西连接我的按钮的点击事件。

这样您的按钮就会提交请求。以前，按钮点击是两件事。

然后，您需要像Joqus所提到的那样处理结果，但我们需要知道您返回的JSON是什么样的。但是，一般情况下，您应该能够在done（）中执行response.MyProp或response.MyObject.MyProp之类的操作。

来自服务器的jQuery ajax进程请求

2 个答案: