JQuery는 Ajax 데이터 요청을 캡슐화하므로 이 작업을 훨씬 쉽게 구현할 수 있습니다. 과거에는 이 함수를 구현하기 위해 많은 코드를 작성해야 했지만 이제는 $.ajax() 메서드를 호출하고 요청 메서드, 주소, 데이터 유형, 콜백 메서드만 지정하면 됩니다. 다음 코드는 클라이언트 양식 데이터를 JSON 형식으로 캡슐화한 다음 JQuery의 Ajax 요청을 통해 서버로 데이터를 보내고 마지막으로 데이터를 데이터베이스에 저장하는 방법을 보여줍니다. 서버는 .ashx 파일로 정의됩니다. 실제로 웹 서비스, ASP.NET 페이지, 핸들러 등 클라이언트 데이터를 수신하고 처리할 수 있는 모든 유형으로 서버를 정의할 수 있습니다.
먼저 클라이언트 측에서는 페이지 양식 데이터가 JavaScript 스크립트를 통해 JSON 형식으로 캡슐화됩니다. GetJsonData() 함수는 이 함수를 완료합니다. 그런 다음 $.ajax() 메서드를 통해 서버의 RequestData.ashx로 데이터를 보냅니다. 클라이언트가 보낸 데이터를 JSON 개체로 변환할 수 있는 JSON.stringify() 메서드가 사용됩니다. 자세한 내용은 여기 https://developer.mozilla.org/en-US/docs/Web/JavaScript/를 참조하세요. /Global_Objects/JSON/stringify
$( "#btnSend" ).click(function() {
$("#request-process-patent").html("데이터를 제출하는 중입니다. 현재 창을 닫지 마세요...");
$ .ajax({
유형: "POST",
url: "RequestData.ashx",
contentType: "application/json; charset=utf-8",
data: JSON.stringify( GetJsonData()),
dataType: "json",
success: function (message) {
if (message > 0) {
alert("요청이 제출되었습니다! 연락드리겠습니다. 최대한 빨리");
}
},
error: function (message) {
$("#request-process-patent").html("데이터를 제출하지 못했습니다! ");
}
});
});
function GetJsonData() {
var json = {
"classid": 2,
" name": $("#tb_name" ).val(),
"zlclass": "테스트 유형 1, 테스트 유형 2, 테스트 유형 3",
"pname": $("#tb_contact_people") .val(),
" tel": $("#tb_contact_phone").val()
};
return json;
서버 코드인 RequestData.ashx를 보세요.
[직렬화 가능]
공용 클래스 RequestDataJSON
{
공용 int classid { get; set; }
공용 문자열 이름 { get; set;
공개 문자열 pname { get; set; RequestData
///
public class RequestData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int num = 0; .Response.ContentType = "application/json";
var data = context.Request;
var sr = new StreamReader(data.InputStream)
var stream = sr.ReadToEnd(); var javaScriptSerializer = new JavaScriptSerializer();
var PostedData = javaScriptSerializer.Deserialize(stream);
tb_query obj = new tb_query()
PostedData.classid; 🎜>obj.name = PostedData.name;
obj .zlclass = PostedData.zlclass;
obj.pname = PostedData.pname;
obj.tel =
obj.ip context.Request.UserHostAddress.ToString();
obj .posttime = DateTime.Now.ToString()
시도
{
(var ctx = new dbEntities())
{
ctx.tb_query.AddObject(obj) ;
num = ctx.SaveChanges();
}
}
catch(예외 메시지)
{
context .Response.Write(msg.Message);
}
context.Response.ContentType = "text/plain";
context.Response.Write(num)
public bool IsReusable
{
get
{
return false
}
}
}
RequestDataJSON 클래스 정의 클라이언트 데이터를 반환하기 위한 직렬화 가능 속성을 사용하여 직렬화하여 데이터를 얻고 데이터베이스에 저장합니다. 위의 코드에는 EntityFramework가 사용되어 데이터베이스 상호 작용 코드가 매우 간결해졌습니다. ajax의 콜백 함수인 Success()와 error()에 해당하는 두 가지 유형의 반환 결과가 있습니다. 성공() 콜백 함수에서 반환 결과 값이 0보다 큰 경우 error() 콜백 함수에서 EntityFramework를 통해 데이터베이스에 추가된 레코드 수를 나타내며 반환 결과는 해당 레코드의 특정 정보를 표시합니다. 실패.
RequestData 클래스는 IHttpHandler 인터페이스를 상속하여 클라이언트 요청을 동기 방식으로 처리함을 나타냅니다. 물론 IHttpAsyncHandler 인터페이스를 상속하여 비동기 요청을 처리하도록 변경할 수도 있습니다. 코드 인터페이스는 비슷합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
