Discuss jQuery’s ajax usage scenarios (c#)_jquery

1: jQuery.ajax syntax basics

jQuery.ajax([options])

Overview: Load remote data via HTTP requests.

jQuery low-level AJAX implementation. For simple and easy-to-use high-level implementations, see $.get, $.post, etc. $.ajax() returns the XMLHttpRequest object it created. You can gain more flexibility using this method.

Data type
$.ajax() function relies on the information provided by the server to process the returned data. Different data processing methods can also be specified through the dataType option. Among them, the data returned by text and xml types will not be processed. If specified as html type, any embedded JavaScript will be executed before the HTML is returned as a string. If specified as json type, the obtained data will be parsed as a JavaScript object and the constructed object will be returned as the result. To send data to the server, Ajax requests use the GET method by default. If you want to use the POST method, you can set the type parameter value. This option also affects how the content in the data option is sent to the server.

Usage Scenario 1:
Description: Save data to the server and display information when successful. jQuery code:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function (msg){
alert( "Data Saved: " msg );
}
});

Usage scenario two:
Description: Load the latest version of an HTML web page. jQuery code:
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results"). append(html);
}
});

load(url, [data], [callback])
Overview: Load the remote HTML file code and insert it into the DOM.
The GET method is used by default - automatically converted to POST method when passing additional parameters.

Usage Scenario 1:
Description: Load the contents of the feeds.html file. jQuery code:
$("#feeds").load("feeds.html");

jQuery.get(url, [data], [callback], [type]) and jQuery.post(url, [data], [callback], [type])

Overview: Load information via remote HTTP GET or POST request.
This is a simple GET or POST request function to replace the complex $.ajax . The callback function can be called when the request is successful. If you need to execute a function on error, use $.ajax.
Description: Display the test.aspx return value (HTML or XML, depending on the return value), and add a set of request parameters. jQuery code:
$.get("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " data) ;
});
$.post("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded : " data);
});

The above is the basic syntax. We just want to understand it first. If you are already familiar with it, then we will start to discuss the above methods and usage scenarios in detail step by step.

2: Practical practice of jQuery.ajax with ASP.NET

First create the Default.aspx page as the request initiation page and get the return value. The code of the page Default.aspx is:

Copy the code The code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryAjax2._Default" %>








< ;/input>
;

ajax:

id="load">load:

get:

;/ul>
 

If there is no code written in Default.aspx.cs, the default is enough.
There are three roles in the request recipient: response.aspx page, test.htm static page and TextJson.txt.
response.aspx page: mainly obtains the data submitted by the client on the server side and returns the data to the client.

test.htm static page: It is mainly used to partially load the latest version of an HTML web page for the client.
TextJson.txt: It is stored in a file as data and allows the client to access it asynchronously.

response.aspx page code, response.aspx is:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>

There is no html code, because the main purpose is to obtain the data submitted by the client on the server side and return the data to the client. There is no need to display html content, so it does not contain html tags.

response.aspx.cs page code:

Copy code The code is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;
namespace JqueryAjax2

{
public partial class response: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string str = Request["key1"];
          Response.Write("success" str); How to obtain the data submitted by the client and return the data to the client.

The code of the test.htm static page is:

Copy the code

The code is as follows:

< ;html xmlns="http://www.w3.org/1999/xhtml" >

test.html




When the static page is requested, it will be returned to the client in html format end, use $("#resulthtml").append(html); to display the content of the test.htm static page.

TextJson.txt contains a piece of text in json format:

{ "key1": "Liu Mingfeng", "key2": "Lin Wang", "key3": "Chen Wenjie", "key4": "Geng Dianjia" }

After being accessed, the data returned is in json format, which will be automatically converted into an object after the client obtains the json.
Okay, jQuery’s asynchronous usage scenarios basically meet our needs, let’s try it yourself.