演示jQuery中的Ajax提交方式 提交多个参数
2020-06-06 06:00
253 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>演示jQuery中的Ajax提交方式 提交多个参数</title> <!--引入jQuery文件, 个别同学的电脑, 可能IDEA中的JavaWeb项目默认不支持jQuery, 需要配置一下.--> <script src="js/jquery-3.3.1.js"></script> <script> //1. 页面加载事件 $(function () { //2. 给btn按钮绑定一个单击事件 $("#btn").click(function () { //3. 通过jQuery的ajax, 采用get方式给后台的AjaxGetServlet发送数据. //细节: 获取要提交的数据 var username = $("#uid").val(); var password = $("#pw").val(); //采用$.ajax()的方式提交数据, 细节: ajax中写的内容必须适合: json字符字符串格式. $.ajax({ type: "get", //表示提交数据的方式, get, post url: "/day04/AjaxServlet", //表示数据提交到哪里. //提交多个参数, 写法1: 就是字符串拼接 //data: "username=" + username + "&password=" + password, //表示具体提交的参数信息. //提交多个参数, 写法2: json字符串 data: {"username":username, "password": password}, //表示具体提交的参数信息. success: function (data) { //提交数据成功后, 后台返回的回执信息. alert(data) } }) }) }) </script> </head> <body> 用户名: <input type="text" name="username" id="uid"/> <br/> 密 码:<input type="text" name="password" id="pw"/> <br/> <input type="button" value="JQuery的Ajax提交方式(ajax提交)" id="btn"/> </body> </html>
相关文章推荐
- jquery多选择动态参数的使用以及ajax异步请求中提交整个form表单中serializeArray()的使用以及后台值得获取方式
- jQuery Form Plugin:AJAX方式提交表单的完全方案
- jQuery基于Ajax方式提交表单功能示例
- Jquery通过Ajax方式来提交Form表单的具体实现
- jquery validate验证插件,在ajax提交方式下的验证
- JQuery方式验证表单和AJAX提交
- Jquery发送ajax请求以及datatype参数为text/JSON方式
- JQuery 的三种ajax提交方式
- jQuery.ajax $.post $.load 序列化表单(ajax提交表单,post传递参数,序列化表单)
- Jquery通过Ajax方式来提交Form表单的具体实现
- Struts学习_Jquery发送ajax请求以及datatype参数为text/JSON方式
- 一个关于jquery用get方式提交,获取参数的奇怪的现象
- jQuery Form Plugin:AJAX方式提交表单的完全方案
- jquery.form.js实现将form提交转为ajax方式提交的使用方法
- 通过jQuery的Ajax方式来提交Form表单
- jQuery的ajax()、post()方法提交数组,参数[] 问题
- jquery.validate的ajax方式验证[可以一个控件下一次传递多个参数,已经成功通过验证]
- jQuery实现Ajax方式提交表单
- 详解Ajax请求(三)——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧
- 在jquery中ajax提交表单的post与get方式详解