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

Rumah

hujung hadapan web

tutorial js

jQuery Ajax melaksanakan operation_jquery tanpa muat semula

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

ajaxjqueryTiada penyegaran

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 + "]尚未存在！您可以注册！");
  }
 }
}

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>

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>

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();

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);
 }

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);
})

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 
 } 
}

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Masa Depan Python dan JavaScript: Trend dan RamalanApr 27, 2025 am 12:21 AM

Trend masa depan Python dan JavaScript termasuk: 1. Kedua -duanya akan terus mengembangkan senario aplikasi dalam bidang masing -masing dan membuat lebih banyak penemuan dalam prestasi.

Python vs JavaScript: Persekitaran dan Alat PembangunanApr 26, 2025 am 12:09 AM

Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.

Adakah JavaScript ditulis dalam C? Memeriksa buktiApr 25, 2025 am 12:15 AM

Ya, teras enjin JavaScript ditulis dalam C. 1) Bahasa C menyediakan prestasi yang efisien dan kawalan asas, yang sesuai untuk pembangunan enjin JavaScript. 2) Mengambil enjin V8 sebagai contoh, terasnya ditulis dalam C, menggabungkan kecekapan dan ciri-ciri berorientasikan objek C. 3) Prinsip kerja enjin JavaScript termasuk parsing, penyusun dan pelaksanaan, dan bahasa C memainkan peranan penting dalam proses ini.

Peranan JavaScript: Membuat Web Interaktif dan DinamikApr 24, 2025 am 12:12 AM

JavaScript adalah di tengah -tengah laman web moden kerana ia meningkatkan interaktiviti dan dinamik laman web. 1) Ia membolehkan untuk menukar kandungan tanpa menyegarkan halaman, 2) memanipulasi laman web melalui Domapi, 3) menyokong kesan interaktif kompleks seperti animasi dan drag-and-drop, 4) mengoptimumkan prestasi dan amalan terbaik untuk meningkatkan pengalaman pengguna.

C dan JavaScript: Sambungan dijelaskanApr 23, 2025 am 12:07 AM

C dan JavaScript mencapai interoperabilitas melalui webassembly. 1) Kod C disusun ke dalam modul WebAssembly dan diperkenalkan ke dalam persekitaran JavaScript untuk meningkatkan kuasa pengkomputeran. 2) Dalam pembangunan permainan, C mengendalikan enjin fizik dan rendering grafik, dan JavaScript bertanggungjawab untuk logik permainan dan antara muka pengguna.

Dari laman web ke aplikasi: Aplikasi pelbagai JavaScriptApr 22, 2025 am 12:02 AM

JavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.

Python vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanApr 21, 2025 am 12:01 AM

Python lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.

Peranan C/C dalam JavaScript Jurubah dan PenyusunApr 20, 2025 am 12:01 AM

C dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 bulan yang laluByDDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang laluByDDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

1 bulan yang laluByDDD

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

2 minggu yang laluByDDD

Inzoi: Cara Memohon ke Sekolah dan Universiti

3 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7753

1643

1398

1293

1234