jQuery ajax process request from the server
Question
So i am kinda new to jquery with ajax. Basically, the page send an http post, and the server side dll, writes a response to the page in json format. I am trying to figure out how to process a response this response. So far when I got to the website and fill in all the information, and hit submit, it then post to a iis webserver page and process the request and serializes into json format and does HttpContext.Current.Response.Write back to the page. The page just now displays the text in json format.
How do i capture this response do stuff with the data and present it to the screen in a more readable format. I need to do this isn jquery /ajax format on all one page.
Below is my fully html code. most of the java script is from an example i found:
<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>
2 answers
solution1
2 2014-02-28 19:08:05
User the callback done to process the response and do the job in the page.
Edit: I have create a small fiddle to show you how an ajax is intended to behave. You can take it as an example: http://jsfiddle.net/Jvzn5/
solution2
2 2014-02-28 19:25:24
Make sure you aren't actually submitting the form itself by using a submit button, etc. You only want to post the form's data via the jQuery.
Change:
<input type="submit"
To:
<input type="button" id="lookup-button"
to prevent the form from being submitted.
Then:
$("#frmLookup").submit(...
To:
$(document).ready(function () {
$("#lookup-button").click(...
...
...
});
Note: you will need an extra }); at the end to close the ${document).ready(function(){ which is saying, after the DOM loads, wire up my button's click event with all the stuff in there.
This way your button is submitting the request. Previously, the button click was doing both things.
Then, you'd need to handle the result, as Joqus mentioned, but we'd need to know what the JSON you are returning looks like. In general, though, you should be able to do something like response.MyProp or response.MyObject.MyProp in done().
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.