Ajax简单的实战案例
这次给大家带来Ajax简单的实战案例，Ajax在实战中的注意事项有哪些，下面就是实战案例，一起来看一下。
我将实现一个简单的Ajax页面无刷新进行用户验证案例：
效果如下图：
实现主要过程：
在UsersAction类中的checkUser方法中接收并验证前台的表单数据，针对不同情况，返回一个状态码code给jsp页面，然后在ajax1.jsp中通过$.post方法接受后台传递过来的状态码
做出不同的响应。
具体代码如下：
1.实体类
package com.bean;
import java.io.Serializable;
public class Users implements Serializable {
private String uname;
private String passwd;
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public String getPasswd() {
return passwd;
}
public void setPasswd(String passwd) {
this.passwd = passwd;
}
public Users(String uname, String passwd) {
super();
this.uname = uname;
this.passwd = passwd;
}
public Users() {
super();
}
}2.action类
package com.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import com.bean.Users;
public class UsersAction {
private Users us;
public Users getUs() {
return us;
}
public void setUs(Users us) {
this.us = us;
}
@Action(value="checkUser")
public String checkUser() {
System.out.println("aaaaaaaaa");
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
PrintWriter out = response.getWriter();
int code = 0;
if (us == null) {
out.print(0);
return null;
} else {
if (us.getUname() == null || us.getUname().trim().equals("")) {
code = 1;
out.print(code);
return null;
} else {
if (us.getPasswd() == null
|| us.getPasswd().trim().equals("")) {
code = 2;
out.print(code);
return null;
} else {
code = 200;
out.print(code);
}
}
}
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}3.ajax1.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>" rel="external nofollow" >
<title>Ajax练习</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" >
-->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#btok").click(function() {
//获取数据
var uname = $("#uname").val();
var passwd = $("#passwd").val();
//将数据组织为json格式
var json = {"us.uname":uname,"us.passwd":passwd};
//进行异步请求
$.post("checkUser.action",json,function(msg){
if(msg == '0') {
alert("用户名和密码错误！");
return;
}
if(msg == '1') {
$("#uerror").html("用户名错误！");
return;
} else {
$("#uerror").html("*");
}
if(msg == '2') {
$("#perror").html("密码错误！");
return;
} else {
$("#perror").html("*");
}
if(msg == '200') {
alert("登陆成功！");
return;
}
});
});
});
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="450" border="1" align="center" cellpadding="1" cellspacing="0">
<tr>
<td colspan="2" align="center" valign="middle" bgcolor="#FFFFCC">用户注册</td>
</tr>
<tr>
<td width="88">账号:</td>
<td width="352"><label for="uname"></label>
<input type="text" name="uname" id="uname">
<span id="uerror" style="color:#F06;">*</span></td>
</tr>
<tr>
<td>密码:</td>
<td><label for="passwd"></label>
<input type="password" name="passwd" id="passwd">
<span id="perror" style="color:#F06;">*</span></td>
</tr>
<tr align="center" valign="middle" bgcolor="#FFFFCC">
<td colspan="2"><input type="button" name="button" id="btok" value="确定">
<input type="reset" name="button2" id="button2" value="重置"></td>
</tr>
</table>
</form>
<br>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci Ajax简单的实战案例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1392
52
Cara paling mudah untuk menanyakan nombor siri cakera keras
Feb 26, 2024 pm 02:24 PM
Nombor siri cakera keras ialah pengecam penting cakera keras dan biasanya digunakan untuk mengenal pasti cakera keras secara unik dan mengenal pasti perkakasan. Dalam sesetengah kes, kami mungkin perlu menanyakan nombor siri cakera keras, seperti semasa memasang sistem pengendalian, mencari pemacu peranti yang betul atau melakukan pembaikan cakera keras. Artikel ini akan memperkenalkan beberapa kaedah mudah untuk membantu anda menyemak nombor siri cakera keras. Kaedah 1: Gunakan Windows Command Prompt untuk membuka command prompt. Dalam sistem Windows, tekan kekunci Win+R, masukkan "cmd" dan tekan kekunci Enter untuk membuka arahan
Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX
Feb 20, 2024 am 10:07 AM
Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.
Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403
Feb 19, 2024 pm 05:55 PM
jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan pembangunan sisi klien. AJAX ialah teknologi yang menghantar permintaan tak segerak dan berinteraksi dengan pelayan tanpa memuatkan semula keseluruhan halaman web. Walau bagaimanapun, apabila menggunakan jQuery untuk membuat permintaan AJAX, anda kadangkala menghadapi 403 ralat. Ralat 403 biasanya ralat akses yang dinafikan pelayan, mungkin disebabkan oleh dasar keselamatan atau isu kebenaran. Dalam artikel ini, kami akan membincangkan cara menyelesaikan permintaan jQueryAJAX yang menghadapi ralat 403
PHP dan Ajax: Membina enjin cadangan autolengkap
Jun 02, 2024 pm 08:39 PM
Bina enjin cadangan autolengkap menggunakan PHP dan Ajax: Skrip sisi pelayan: mengendalikan permintaan Ajax dan mengembalikan cadangan (autocomplete.php). Skrip pelanggan: Hantar permintaan Ajax dan cadangan paparan (autocomplete.js). Kes praktikal: Sertakan skrip dalam halaman HTML dan nyatakan pengecam elemen input carian.
Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403?
Feb 23, 2024 pm 04:27 PM
Bagaimana untuk menyelesaikan masalah jQueryAJAX ralat 403? Apabila membangunkan aplikasi web, jQuery sering digunakan untuk menghantar permintaan tak segerak. Walau bagaimanapun, kadangkala anda mungkin menghadapi kod ralat 403 apabila menggunakan jQueryAJAX, menunjukkan bahawa akses dilarang oleh pelayan. Ini biasanya disebabkan oleh tetapan keselamatan bahagian pelayan, tetapi terdapat cara untuk mengatasinya. Artikel ini akan memperkenalkan cara menyelesaikan masalah ralat jQueryAJAX 403 dan memberikan contoh kod khusus. 1. membuat
Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?
Mar 09, 2024 pm 05:36 PM
Menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP adalah senario biasa dalam pembangunan web Melalui Ajax, halaman boleh diperoleh secara dinamik tanpa menyegarkan data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP, dan memberikan contoh kod khusus. Pertama, kita perlu menulis fail PHP untuk mengendalikan permintaan Ajax dan mengembalikan pembolehubah yang diperlukan. Berikut ialah kod contoh untuk fail PHP mudah getData.php:
PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik
Jun 06, 2024 pm 01:12 PM
Ajax (JavaScript Asynchronous dan XML) membenarkan menambah kandungan dinamik tanpa memuatkan semula halaman. Menggunakan PHP dan Ajax, anda boleh memuatkan senarai produk secara dinamik: HTML mencipta halaman dengan elemen kontena dan permintaan Ajax menambah data pada elemen selepas memuatkannya. JavaScript menggunakan Ajax untuk menghantar permintaan kepada pelayan melalui XMLHttpRequest untuk mendapatkan data produk dalam format JSON daripada pelayan. PHP menggunakan MySQL untuk menanyakan data produk daripada pangkalan data dan mengekodnya ke dalam format JSON. JavaScript menghuraikan data JSON dan memaparkannya dalam bekas halaman. Mengklik butang mencetuskan permintaan Ajax untuk memuatkan senarai produk.
PHP dan Ajax: Cara Meningkatkan Keselamatan Ajax
Jun 01, 2024 am 09:34 AM
Untuk meningkatkan keselamatan Ajax, terdapat beberapa kaedah: Perlindungan CSRF: menjana token dan menghantarnya kepada pelanggan, menambahnya ke bahagian pelayan dalam permintaan untuk pengesahan. Perlindungan XSS: Gunakan htmlspecialchars() untuk menapis input bagi mengelakkan suntikan skrip berniat jahat. Pengepala Kandungan-Keselamatan-Dasar: Hadkan pemuatan sumber berniat jahat dan nyatakan sumber dari mana skrip dan helaian gaya dibenarkan untuk dimuatkan. Sahkan input sisi pelayan: Sahkan input yang diterima daripada permintaan Ajax untuk menghalang penyerang daripada mengeksploitasi kelemahan input. Gunakan perpustakaan Ajax yang selamat: Manfaatkan modul perlindungan CSRF automatik yang disediakan oleh perpustakaan seperti jQuery.
