Rumah hujung hadapan web tutorial js jquery ajax cara menyerahkan data borang ke jsp_jquery

jquery ajax cara menyerahkan data borang ke jsp_jquery

May 16, 2016 pm 03:43 PM

AJAX semakin popular Sebagai pembangun program WEB, jika anda tidak berasa seperti ini, anda akan ketinggalan, malah mungkin akan disingkirkan berulang kali apabila memohon pekerjaan. Saya juga seorang pembangun program WEB Sudah tentu, saya perlu "go with the flow", jika tidak, kerja saya tidak akan terjamin!

Sebelum ini, AJAX telah dilaksanakan menggunakan skrip Javascript satu demi satu, yang sangat menyusahkan. Selepas mempelajari Jquery, saya merasakan bahawa melaksanakan AJAX tidak begitu sukar, sebagai tambahan kepada rangka kerja Jquery, terdapat rangka kerja lain yang sangat baik Di sini saya akan memberi tumpuan kepada Jquery yang lebih popular. Terdapat dua cara untuk menghantar borang dalam Jquery AJAX, satu adalah menghantar data melalui parameter url, dan satu lagi adalah menyerahkan borang (seperti biasa, nilai borang Borang boleh diperolehi di latar belakang). Dalam borang yang hendak dihantar, jika terdapat banyak elemen, dicadangkan untuk menghantar dengan cara kedua, sudah tentu, jika anda ingin mempraktikkan "kemahiran menaip" anda, bukanlah idea yang buruk untuk menyerahkan dengan cara pertama. Saya percaya pemaju tidak mahu mensia-siakan usaha mereka!

Teknologi Ajax memberikan kami pengalaman pengguna yang baik Pada masa yang sama, menggunakan jquery dapat memudahkan pembangunan dan meningkatkan kecekapan kerja.

Berikut ialah pengenalan kepada langkah pembangunan umum.

Artikel ini menggunakan alat pembangunan jquery-1.3.2.min.js.

Buat dua halaman baharu:

1. show.jsp: Panggil ajax untuk menghantar data dalam borang ke halaman ajax.jsp.

2. ajax.jsp: Dapatkan data borang yang diluluskan oleh halaman show.jsp dan kembalikan hasilnya.

Format pengekodan dua halaman hendaklah ditetapkan kepada GBK:

<%@ page contentType="text/html;charset=GBK"%>
Salin selepas log masuk

Bahagian utama halaman show.jsp:

1. Tambahkan rujukan kepada jquery-1.3.2.min.js:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Salin selepas log masuk

2. Tetapkan id borang, yang digunakan semasa memanggil kaedah ajax.

<form id="ajaxFrm" >
Salin selepas log masuk

3. Sediakan div untuk memaparkan hasil yang dikembalikan oleh halaman ajax.jsp

<div id="ajaxDiv"></div>
Salin selepas log masuk

4. Tambahkan butang untuk memanggil ajax

<input type="button" onClick="doFind();" value="调用一下ajax" >
Salin selepas log masuk

5. Tambah fungsi untuk memanggil ajax:

function doFind(){

$.ajax({

cache: false,

type: "POST",

url:"ajax.jsp", //把表单数据发送到ajax.jsp

data:$('#ajaxFrm').serialize(), //要发送的是ajaxFrm表单中的数据

async: false,

error: function(request) {

alert("发送请求失败!");

},

success: function(data) {

$("#ajaxDiv").html(data); //将返回的结果显示到ajaxDiv中

}

});

}
Salin selepas log masuk

Kod sumber halaman ajax.jsp:

<%@ page contentType="text/html;charset=GBK"%>

<%

String userName = request.getParameter("UserName");

if(userName!=null){

userName = new String(userName.getBytes("ISO-8859-1"), "utf-8");//解决乱码的问题

}

String returnString = "";

returnString="你好," + userName;

out.print(returnString);

%>
Salin selepas log masuk

Kesan operasi adalah seperti berikut:

jquery ajax cara menyerahkan data borang ke jsp_jquery

jquery ajax cara menyerahkan data borang ke jsp_jquery

jquery ajax serah borang pas nilai daripada tindakan ke jsp

halaman jsp:

Kod adalah seperti berikut:

var clientTel = $("#clientTel").val(); 
var activityId = $("#activityId").val(); 
$.ajax({ 
type : "post",//发送方式 
url : "/arweb/reserve/saveCode.action",// 路径 
data : "clientTel="+clientTel+"&activityId="+activityId , 
success: function(text){$("#randomCode").val(text);}, 
error: function(text) {alert("对不起,用户ID不存在,请输入正确的用户ID");} 
}); 
Salin selepas log masuk

kelas acion:

Kod adalah seperti berikut:

HttpServletResponse res = ServletActionContext.getResponse(); 
res.reset(); 
res.setContentType("text/html;charset=utf-8"); 
PrintWriter pw = res.getWriter(); 
pw.print(random); 
pw.flush(); 
pw.close(); 
Salin selepas log masuk

pw.print(random); Rawak di sini ialah nilai yang ingin diberikan oleh tindakan kepada jsp Dalam jsp, success: function(text) teks di sini adalah untuk menerima nilai yang dihantar daripada tindakan.

Kenyataan Laman Web ini
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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Ganti aksara rentetan dalam javascript Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Ganti aksara rentetan dalam javascript

Tutorial Persediaan API Carian Google Custom Tutorial Persediaan API Carian Google Custom Mar 04, 2025 am 01:06 AM

Tutorial Persediaan API Carian Google Custom

Contoh warna json fail Contoh warna json fail Mar 03, 2025 am 12:35 AM

Contoh warna json fail

8 plugin susun atur halaman jquery yang menakjubkan 8 plugin susun atur halaman jquery yang menakjubkan Mar 06, 2025 am 12:48 AM

8 plugin susun atur halaman jquery yang menakjubkan

10 JQuery Syntax Highlighters 10 JQuery Syntax Highlighters Mar 02, 2025 am 12:32 AM

10 JQuery Syntax Highlighters

Bina Aplikasi Web Ajax anda sendiri Bina Aplikasi Web Ajax anda sendiri Mar 09, 2025 am 12:11 AM

Bina Aplikasi Web Ajax anda sendiri

Apa itu ' ini ' Dalam JavaScript? Apa itu ' ini ' Dalam JavaScript? Mar 04, 2025 am 01:15 AM

Apa itu ' ini ' Dalam JavaScript?

10 JavaScript & JQuery MVC Tutorial 10 JavaScript & JQuery MVC Tutorial Mar 02, 2025 am 01:16 AM

10 JavaScript & JQuery MVC Tutorial

See all articles