html怎么异步传数据,用jQuery实现异步通信(用json传值)方法步骤

article/2025/11/5 1:55:18

jQuery是时下比较流行的一个js库,能够用简单的代码做出理想的效果,就像官网上说的那样“write less ,do more”。Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jquery的魅力。

首先你需要下载jquery的最新的js文件,并将其引入到文件中,你也可以在此下载:点我下载。

这次通信用的是jquery的jQuery.post(url,[data], [callback],[type])方法,这是一个简单的POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。参数为:url,[data],[callback],[type] 相对应的参数类型为String,Map,Function,String:

●url:发送请求地址。

●data:待发送 Key/value参数。

●callback:发送成功时回调函数。

●type:返回内容格式,xml,html, script, json, text, _default)

新建一个jsp文件jqueryDemo.jsp,代码如下所示:

pageEncoding="GB18030"%>

jquery

table.demo{border-collapse: collapse;margin-top: 50px;margin-left: 220px;}

table.demo th,td {padding: 0; border: 1px solid #000;}

#img,#msg{position: static;float: left;}

#account,#password1,#password2{margin-left: 10px;}

#img{margin-left: 10px;}

function accountCheck(){

var account=$('#account').val();

if(account==""){

alert("用户帐号不能为空!");

$('#img').html("");

$('#msg').text("");

return;

}

$.post('JqueryServlet',{strAccount:account},function(data){

eval("data="+data);

if(data.success){

$('#img').html("cross.png");

}else{

$('#img').html("tick.png");

}

$('#msg').text(data.msg);

});

}

新用户注册
用户帐号:*
用户密码:
重复密码:

新建一个servlet文件JqueryServlet.java,代码如下所示:

package com.ldfsoft.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

/**

*Servlet implementation class JqueryServlet

*/

public class JqueryServlet extendsHttpServlet {

privatestatic final long serialVersionUID = 1L;

/**

* @see HttpServlet#HttpServlet()

*/

public JqueryServlet() {

super();

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#service(HttpServletRequestrequest, HttpServletResponse response)

*/

protectedvoid service(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {

//TODO Auto-generated method stub

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

String account=request.getParameter("strAccount");

PrintWriter out=response.getWriter();

String str=""; //用以json传值

if(account.equals("admin")){

str="{success:true,msg:'该账户已存在'}";

}else{

str="{success:false,msg:'该账户可以使用'}";

}

out.write(str);

}

}

好了,现在可以运行了,打开服务器,运行此jsp文件,页面如下所示:

15B9594G5150-1P07.jpg

当输入admin时,页面如下所示:

5e06e9ada432b5ddda467fee8cd54db6.png

当输入其他的字符时,页面如下所示:

5de2ec129c0a8cbe3ccebc5ef68c78bd.png

可以看出jquery能够实现ajax的功能,并且代码更简洁了。

只是,最后本人有一个问题迟迟没有解决,那就是输入中文时传到后台的值乱码,按照网上的好多办法都没有解决掉,不知道为什么,谁有更好的方法希望能给我推荐一下,本人不胜感激。

这是本人学习的结果,允许转载,欢迎交流,但转载务必给出本文章的链接地址


http://chatgpt.dhexx.cn/article/7jJhgfYC.shtml

相关文章

用jQuery实现异步通信(用json传值)具体思路

jQuery是时下比较流行的一个js库,能够用简单的代码做出理想的效果,就像官网上说的那样“write less ,do more”。Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jqu…

jQuery的toggle

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><!--引入jq框架--><script src"https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script></head><body>…

12.jQuery技术

一、jQuery知识点总览。 css&#xff08;&#xff09;方法&#xff1a;//通过css&#xff08;&#xff09;方法获取样式值let backgroundcolor $("#one").css("backgroundColor");alert(backgroundcolor);//通过css&#xff08;&#xff09;方法设置id为…

jQuery

##jQuery基础 1.概念&#xff1a;一个JavaScript框架。简化JS开发 *jQuery是一个快速、简洁的JavaScript框架&#xff0c;是继Prototype之后又一个优秀的JavaScript代码库&#xff08;框架&#xff09;于2006年1月由John Resig发布。 jQuery设计的宗旨是“write Less&#xf…

jQuery建立WebSocket连接

jQuery建立WebSocket连接&#xff0c;向服务端发送数据&#xff0c;实现WebSocket连接成功。 js代码如下&#xff1a; <script src"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type"text/javascript">…

WebGoat攻略 for Mac(1)

WebGoat攻略 for Mac&#xff08;1&#xff09; 一、环境配置1.配置Docker2.配置WebGoat3.连接WebGoat 二、题目攻略Introduction(介绍)a.WebGoatb.WebWolf General(通用)a.HTTP Basics(HTTP基础)b.HTTP Proxies配置OWASP ZAP c.Developer Tools(开发人员工具)d.CIA Triade.Cry…

代码审计之WEBGOAT 反序列化

反序列化这关在前端页面可以看到是提交token到后端&#xff0c;先看一下接口名 可以看到接口名为InsecureDeserialization/task&#xff0c;那就后端全局搜索InsecureDeserialization/task&#xff0c;最终定位到InsecureDeserializationTask.java 源码如下&#xff1a; packa…

kali搭建webgoat靶场

下载webgoat-server-8.0.0.M26.jar与webwolf-server-8.0.0.M26.jar&#xff0c;并保存至kali的documents处&#xff0c;并在此打开终端&#xff08;不然无法打开&#xff09; 打开webgoat-server-8.0.0.M26.jar 浏览器访问127.0.0.1:8080/WebGoat/login.html 进行注册且登录 成…

基于 WebGoat 平台的 SQL 注入攻击

基于 WebGoat 平台的 SQL 注入攻击 扩展功能参考: https://blog.csdn.net/HZC0217/article/details/126790211 使用实例参考: https://www.cnblogs.com/hndreamer/p/16635984.html 目录 1、什么是 webgoat? 2、jar 下载 3、环境搭建 4、运行 webgoat 5、在浏览器中登录 …

owaspbwa之WebGoat

简介 下载&#xff1a;https://sourceforge.net/projects/owaspbwa/files/ GitHub: https://github.com/chuckfw/owaspbwa/wiki/UserGuide 0x001 侦查 PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 5.3p1 Debian 3ubuntu4 (Ubuntu Linux; protoc…

WebGoat之JWT部分攻略

环境搭建 使用docker容器搭建webgoat环境 什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准.该token被设计为紧凑且安全的&#xff0c;特别适用于分布式站点的单点登录&#xff08;单点登录SSO&#xff1a;在多个应用系统中&…

Webgoat靶场搭建

环境 jdk16 安装 文件源码看评论区哈。 下载过后是这个jdk-16.0.2.7z文件&#xff0c;这是个JDK16的包,进入bin目录下&#xff0c;可以看到靶场文件&#xff0c; 启动网站 打开一个cmd窗口执行启动网站命令 java --add-opens java.base/sun.nio.chALL-UNNAMED --add-op…

WebGoat通关教程

这里我们用docker镜像一键搭建即可 用docker命令开启webgoat docker run -d -p 8081:8080 -p 9090:9090 -e TZEurope/Amsterdam webgoat/goatandwolf 打开192.168.109.131:8081/WebGoat和192.168.109.131:9090/WebWolf能打开即可 192.168.109.131是本地IP 直接注册一个账号&…

在Ubuntu环境下使用docker配置webgoat环境

1.安装Docker环境 sudo apt install docker.io 2.配置Docker加速 打开配置文件 vim /etc/docker/daemon.json添加mirrors信息 {"registry-mirrors":["https://registry.docker-cn.com","http://hub-mirror.c.163.com"]}3.重启docker system…

WebGoat General Crypto Basics

目录 第2页 第3页 第4页 第6页 第2页 这一页是讲base64编码和Basic Authentication的 简单来说Basic Authentication中使用了base64编码&#xff0c;以本页的题目举例&#xff0c;如果有个HTTP头长这样 Authorization: Basic ZmFuY3llbGU6c2VjcmV0 那这个网站就是用了Basi…

docker安装webgoat

docker安装webgoat 一般来说 无需docker&#xff0c;在 https://github.com/WebGoat/WebGoat/releases中&#xff0c;下载最新的v8.2.2.jar,然后java -jar webgoat-server-8.2.2.jar然后反问http://127.0.0.1/WebGoat即可 但是&#xff0c;由于本人windows主机(java10.0.2)和ka…

WebGoat-8.2.2版靶机学习总结

摘要&#xff1a;本文档介绍了WebGoat靶机平台在Windows10系统下的使用。其操作过程均在一台主机上完成。该平台涉及的训练项目有http代理、数据库注入、身份校验缺陷、XSS、访问控制缺陷、通信拦截、序列化问题、CSRF、问题组件等内容&#xff0c;帮助学习者学习网络攻防基础&…

WebGoat安装

WebGoat是运行在Java虚拟机的WEB漏洞实验靶场,可以提供包括跨站点脚本攻击(XSS),访问控制,线程安全,操作隐藏字段,操纵参数,弱会话cookie,SQL盲注,数字型SQL注入,字符串型SQL注入,web服务、Open Authentication失效,危险的HTML注释等多个漏洞练习. 使用WebGoat的方式有很多,我…

WebGoat v8.0打靶笔记

目录 一、环境的配置 &#xff08;1&#xff09;安装docker &#xff08;2&#xff09;WebGoat获取 &#xff08;3&#xff09;burp suite的配置 二、Introduction 三、General &#xff08;1&#xff09;HTTP Basics &#xff08;2&#xff09;HTTP Proxies &#…

安装WebGoat步骤

安装Webgoat步骤 安装目的&#xff1a;了解并深入目前安全行业的OWASP ten 10漏洞 何为Webgoat? Webgoat内置OWASP十大漏洞 安装过程 下载webgoat架包 地址 创建一个文件夹&#xff0c;将上面框出的架包复制到文件夹里 检测JAVA环境 使用之前得先把Java的版本升级一下…