서버에서 jQuery 아약스 프로세스 요청

-1

그래서 나는 아약스와 함께 jquery에 좀 새로운입니다. 기본적으로이 페이지는 http 게시물을 보내고 서버 쪽 dll은 json 형식으로 페이지에 응답을 씁니다. 이 응답을 처리하는 방법을 파악하려고합니다. 지금까지 웹 사이트에 도착하여 모든 정보를 입력하고 제출을 누르면 iis 웹 서버 페이지에 게시되고 요청을 처리 한 다음 json 형식으로 serialize하고 HttpContext.Current.Response.Write 페이지로 돌아갑니다. 이제 페이지에 json 형식으로 텍스트가 표시됩니다.서버에서 jQuery 아약스 프로세스 요청

이 응답을 어떻게 캡처하여 데이터로 처리하고 더 읽기 쉬운 형식으로 화면에 표시 할 수 있습니까? 모든 페이지에서이 isn jquery/ajax 형식을 수행해야합니다.

아래는 완전히 html 코드입니다.

<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="[email protected]"/> 
    <input type="submit" name="wLookup" value="Lookup" /> 

    </form> 

    <div id="data"> 

    </div> 
</body> 

</HTML>

출처

2014-02-28 user1158745

사용자가 콜백 done이 response를 처리하고 페이지에서 작업을 할 수있는 : 자바 스크립트의 대부분은 내가 발견 한 예에서입니다.

편집 : 나는 아약스가 어떻게 행동할지 알려주는 작은 바이올린을 만들었습니다. 예를 들면 다음과 같습니다. http://jsfiddle.net/Jvzn5/

출처

2014-02-28 19:08:05 Joqus

예제를 제공 할 수 있습니까? 지금 모든 데이터는 페이지에 json 형식으로 표시됩니다. – user1158745

제출 버튼 등을 사용하여 양식 자체를 실제로 제출하지 않았는지 확인하십시오. 양식의 데이터는 jQuery를 통해서만 게시하고 싶습니다.

변경 :

<input type="submit"

사람 :

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

제출되는 양식을 방지하기 위해. 그런 다음

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

사람 :

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

참고 :이)} 추가로 필요합니다; 마지막에 $ {document} .ready (function() {DOM로드 후, 거기에있는 모든 내용으로 내 버튼의 클릭 이벤트가 연결됩니다.)

이렇게하면 버튼이 이전에는 버튼 클릭으로 두 가지 작업을 수행했습니다.

그런 다음 Joqus가 언급했듯이 결과를 처리해야하지만 JSON이 어떻게 표시되는지 알 필요가 있습니다. 일반적으로, 그래도 response.MyProp 또는 response.MyObject.MyProp in done()과 같은 작업을 수행 할 수 있어야합니다.

출처

2014-02-28 19:25:24 SethMW

당신이 내 양식을 미국에 의해 그 자체로 말하는 것을 의미합니까? 제출 버튼, Dd 내 HTML 코드 의미

아무 것도 제거 할 필요는 없지만 jQuery를 통해서만 게시하는 경우에는 action, method 속성이 실제로 필요하지 않습니다. 자세한 내용은 편집 된 응답을 참조하십시오. – SethMW

그래서 제출 단추를 변경했습니다. 그래서 내 $ .ajax 코드는 실제로 게시물 요청을 제출하지 않습니다. – user1158745

서버에서 jQuery 아약스 프로세스 요청

답변

관련 문제