一、一个一个的接收数据,并使用 val() 赋值给变量
var username0=$("#username").val();
var password0=$("#password").val();
<script>
$(document).ready(function() {
$("#regionBtn").click(function () {
var url0=$("#form1").attr("action");//获取请求后端servlet的名字
var username0=$("#username").val();
var password0=$("#password").val();
alert(username0+","+password0);
$.ajax({
type:"post",
url:url0,
// url:"loginServlet",
cache:false,
data:{"username0":username0 , "password0":password0},
dataType:"json", //是后端传回来的数据类型,不是前端传过去的数据类型
success:function(re)
{
alert("ok");
},
error: function(re)
{
alert("no");
}
})
})
})
</script>
问题来了:当form表单数据很多时,这样一个一个的取和传非常的繁琐复杂,所以以下的序列化方法解决了这一问题。
二、当form表单数据只是文本数据时,使用serialize()接收表单数据
var data0=$("#form1").serialize();
以前只会取一个一个的取form表单的数据,现在可以直接使用serialize()序列化把表单中的所有数据取出来组成一个串。序列化后的形式如图所示:
用户注册<br>
<form action="regionServlet" method="POST" id="form1" >
用户名:<input type="text" name="username" id="username"><br>
密码:<input type="password" name="password" id="password"><br>
</form>
<button id="regionBtn" >注册</button>
<script>
$(document).ready(function() {
$("#regionBtn").click(function () {
var url0=$("#form1").attr("action");
var data0=$("#form1").serialize();
alert(data0);
$.ajax({
type:"post",
url:url0,
cache:false,
data:data0,
dataType:"json",
success:function(re)
{
alert("ok");
},
error: function(re)
{
alert("no");
}
})
})
})
</script>
问题来了:当使用serialize()方法接收含有文件数据的form时,文件数据时没有被接收到的。所以使用下面的FormData来接收含有文件数据的form数据。
注意:使用serialize()时按钮放在form表单的外面。
三、当form表单中包含文件数据时,使用FormData接收表单数据
var data0=new FormData($("#form2")[0]);
FormData会将表单数据以键值对的形式来表示,并且还可以通过key来追加、修改、获取等操作。
用户注册<br>
<form action="regionServlet" method="POST" id="form1" enctype="multipart/form-data">
用户名:<input type="text" name="username" id="username"><br>
密码:<input type="password" name="password" id="password"><br>
头像:<input type="file" name="tx" id="tx"><br>
</form>
<button id="regionBtn" >注册</button>
<script>
$(document).ready(function() {
$("#regionBtn").click(function () {
var url0=$("#form1").attr("action");//获取请求后端servlet的名字
// var username0=$("#username").val();
// var password0=$("#password").val();
// var data0=$("#form1").serialize();//将form表单中的数据序列化为串的形式
var data0=new FormData($("#form1")[0]);
// alert(data0.get("username"));
// alert(data0.get("tx"));
$.ajax({
type:"post",
url:url0,
cache:false,
data:data0,
processData:false,//需设置为false。因为data值是FormData对象,不需要对数据做处理
contentType:false,//需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
dataType:"json", //是后端传回来的数据类型,不是前端传过去的数据类型
success:function(re)
{
alert("ok");
},
error: function(re)
{
alert("no");
}
})
})
})
</script>
四、使用FormData的方法获取数据并上传到后端的servlet,并实现文件上传和保存数据到数据库
https://blog.csdn/weixin_45947938/article/details/124295211https://blog.csdn/weixin_45947938/article/details/124295211
更多推荐
JQuery的Ajax获取form表单的数据并传给后端servlet的方法
发布评论