jQuery Ajax melaksanakan operation_jquery tanpa muat semula-tutorial js-php.cn

jQuery Ajax melaksanakan operation_jquery tanpa muat semula

WBOY

Lepaskan： 2016-05-16 15:21:53

asal

1147 orang telah melayarinya

Menggunakan jQuery untuk melaksanakan operasi Ajax
Saya ingin mencapai halaman Ajax tanpa kesan penyegaran, tetapi agak menyusahkan untuk menggunakan kod Ajax secara langsung, jadi saya ingin menggunakan jQuery untuk mencapainya. jQuery dengan baik merangkum objek teras Ajax, XMLHTTPRequest. Jadi ia sangat mudah digunakan.
Mula-mula, buat kod sebelah pelayan Di sini, Servlet digunakan untuk melaksanakan pemprosesan data sebelah pelayan adalah seperti berikut:

protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // 设置编码格式
  resp.setContentType("text/html;charset=UTF-8");
 // 创建输出对象
 PrintWriter out = resp.getWriter();
 
 // 得到请求参数
 String name = req.getParameter("uname");
 // 判断
 if (name == null || name.length() == 0)
 {
  out.println("用户名不能为空！");
 }
 else
 {
  // 判断
  if (name.equals("cheng"))
  {
  out.println("用户名["+ name +"]已存在！请使用其他用户名！");
  }
  else
  {
  out.println("用户名[" + name + "]尚未存在！您可以注册！");
  }
 }
}

Salin selepas log masuk

Kemudian, buat halaman JSP untuk menggunakan jQuery, anda mesti memperkenalkan perpustakaan jQuery, iaitu fail Javascript, ke dalam halaman Selain itu, anda perlu memperkenalkan fail Javascript tersuai, seperti berikut:

<!-- 引入Javascript文件 -->
 <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/verify.js"></script>

Salin selepas log masuk

Halaman JSP hanya memerlukan kotak teks, butang biasa dan lapisan DIV kosong DIV digunakan untuk memaparkan hasil pemprosesan yang dikembalikan oleh pelayan peristiwa klik butang mencetuskan kaedah pengesahan. Seperti berikut:

 <body>
 <center>
  用户名：<input type="text" id="uname" name="uname" />
 <br />
 <input type="button" name="btnVerify" value="验证" onclick="verify()" />
 <br />
 <div id="result">
 
 </div>
 </center>
 </body>

Salin selepas log masuk

Nota: Tidak perlu menggunakan borang untuk menyerahkan data dalam mod Ajax, jadi tidak perlu menulis teg

Seterusnya, cipta fail verify.js dan cipta kaedah verify() dalam fail untuk mencapai kesan bukan muat semula Ajax Ini adalah langkah paling penting dalam contoh ini. Jika anda ingin menggunakan jQuery untuk melaksanakan Ajax, terdapat empat langkah:

· Dapatkan kandungan dalam kotak teks;
· Terima data yang dikembalikan oleh pelayan;
mula-mula dapatkan objek melalui jQuery dan dapatkan nilai objek, seperti berikut:

Dapatkan nod halaman melalui fungsi $() dalam jQuery, yang mendapat objek jQuery, dan kemudian dapatkan nilai nod melalui kaedah val() dalam jQuery, iaitu kandungan dalam kotak teks.

Untuk langkah kedua, kami menggunakan kaedah get() jQuery untuk menghantar data ke pelayan, seperti berikut:

$.get("TestServlet?uname="Nama pengguna,null,panggilan balik);

 // 取得文本框对象,通过$()获取的所有对象都是jQuery对象
 var jQueryObject = $("#uname");
 // 获取文本框中的值
 var userName = jQueryObject.val();

Salin selepas log masuk

Kaedah ini mengembalikan objek XMLHttpRequest Kaedah ini menyediakan tiga parameter Yang pertama ialah URL bahagian pelayan Parameter kedua ialah parameter yang akan dihantar secara langsung parameter URL pertama, jadi secara amnya parameter ini adalah nol Parameter ketiga ialah fungsi panggil balik selepas pelayan berjaya memproses data.
Untuk langkah ketiga, anda harus mencipta fungsi panggil balik untuk memproses data yang dikembalikan oleh pelayan, seperti berikut:

Gunakan kaedah html() jQuery untuk memaparkan data secara dinamik ke dalam lapisan DIV. Sekarang kita mengoptimumkan kod di atas Kita boleh mencapai fungsi semua kod di atas dengan hanya dua ayat kod Ini adalah salah satu kekuatan jQuery. Kaedah verify() dalam fail verify.js juga boleh ditulis dalam bentuk berikut:

 // 回调函数
 function callback(data)
 {
 
 }
 该回调函数有一个参数，该参数就是客户端返回的数据。
 针对于第四步，再次利用jQueyr的选择器函数得到DIV层，将返回的数据显示在该层之上，如下：
 function callback(data)
 {
 /**
 * 第三步，接收服务器端返回的数据
 */
 // 将服务器端返回的数据动态的显示在页面上
 var resultObject = $("#result");
 resultObject.html(data);
 }

Salin selepas log masuk

Izinkan saya berkongsi satu lagi dengan anda Berikut ialah contoh "log masuk tanpa muat semula", dilaksanakan menggunakan Ashx jQuery Ajax.

1. Kod instance backend fail ashx (boleh digantikan dengan membaca daripada pangkalan data)

$.get("TestServlet&#63;uname=" +$("#uname").val(),null,function(data){
 $("#result").html(data);
})

Salin selepas log masuk

2. Fail aspx contoh kod bahagian hadapan

Masukkan kod di atas ke dalam halaman aspx bahagian hadapan dan halaman ashx bahagian belakang masing-masing untuk mencapai log masuk Ajax yang sangat mudah Sangat mudah, bukan?

public void ProcessRequest(HttpContext context) 
{ 
 context.Response.ContentType = "text/plain"; 
 //context.Response.Write("Hello World"); 
 
 string name = context.Request.Params["name"].ToString().Trim(); 
 if ("china".Equals(name)) 
 { 
 context.Response.Write("1");//1标志login success 
 } 
 else 
 { 
 context.Response.Write("0");//0标志login fail 
 } 
}

Salin selepas log masuk