jquery ajax cara menyerahkan data borang ke jsp_jquery

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"%>

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>

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

<form id="ajaxFrm" >

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

<div id="ajaxDiv"></div>

4. Tambahkan butang untuk memanggil ajax

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

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中

}

});

}

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

%>

Kesan operasi adalah seperti berikut:

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

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

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.