使用jQuery实现Ajax 表单的序列化.serialize() (二）

最新推荐文章于 2021-08-06 10:30:39 发布
最新推荐文章于 2021-08-06 10:30:39 发布
阅读量487 收藏
点赞数
分类专栏： JSON
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hlx20080808/article/details/89542053
版权

登录时，用无刷新实现，有表单提交的Servlet中处理数据响应到页面!

JSP页面

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" >
    $(function () {

        $("#btn1").click(function () {

            //$("#frm").serialize()提交参数
            $.getJSON("login",$("#frm").serialize(),function (data) {
                //alert(data);
                //清空
                $("#frm").find("~p").remove();
                if(data==1){
                    $("#frm").after("<p>登录成功！</p>")
                    $("#frm").find("~p").css("color","blue");
                }else{
                    $("#frm").after("<p>登录失败！</p>")
                    $("#frm").find("~p").css("color","red");
                }

            })
        })
    });
</script>
<body>
<form id="frm">
    姓名: <input type="text" name="uname" value="John" /><br />
    密码: <input type="text" name="upass" value="123456" /><br />
    <input name="sub" type="button" value="注册"  id="btn1"/>
</form>
</body>

Servlet处理

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");

        PrintWriter out = response.getWriter();

        //
        request.setCharacterEncoding("utf-8");

        //
        String name =request.getParameter("uname");
        String pwd =request.getParameter("upass");

        //
        if("John".equals(name) && "123456".equals(pwd)){
            out.println(1);
        }else{
            out.println(0);
        }


        out.flush();
        out.close();
    }

 

凌冰_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现form表单序列化转换为json对象功能示例
10-18
jQuery库提供了一种简单的方法来实现这一功能，本篇文章将详细介绍如何使用jQuery将form表单序列化并转换为JSON对象。 首先，让我们理解一下基本概念。**序列化（Serialization）**是将复杂的数据结构转化为字符串...
jQuery-serialize()输出序列化form表单值的方法
10-27
jQuery-serialize() 方法是 jQuery 库提供的一种便捷方式，用来序列化一个表单（form）中的数据，即将表单中的数据转换成一个 URL 编码的文本字符串。在进行 AJAX 请求时，这个字符串可以直接用作 URL 的查询字符串...
【转载】jQuery ajax()序列化提交form数据
beidaol的专栏
12-25 924
转自：https://www.cnblogs.com/leejersey/p/3750259.html 使用serialize()提交form数据 jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化，如： &lt;form action=""&gt; First name: &lt;...
jQuery ajax - serialize() 方法-输出序列化表单值
aopiao5855的博客
10-08 311
定义和用法 serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。 语法 $(selector).serialize() <html> <head> <scr...
serialize（）序列化表单（ajax在jQuery里面的运用学习第八天）
weixin_42306620的博客
06-27 290
        在使用全局函数$.get()和$.post()向服务器传递参数时，其中的参数是通过名称属性逐个搜索输入字段的方式进行传输的，如果表单的输入字段过多，这种方式就比较麻烦，而且不利于拓展。为了解决这个问题，jQuery引入serialize（）方法，该方法可以简化参数传值的方式，其调用的语法格式如下：        serialize（）        该方法的功能是将所选择的DOM元...
jQuery ajax - serialize() 方法
一万个小时
01-09 726
1、实例 输出序列化表单值的结果： $("button").click(function(){ $("div").text($("form").serialize()); }); 2、定义和用法 serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。 序列化的值可在生
Ajax serialize() 表单进行序列化方式上传文件
10-19
总结来说，`Ajax serialize()`方法用于序列化表单数据，但不适用于文件上传。`FormData`对象的出现弥补了这一不足，它使得Ajax可以处理文件上传，同时保持页面无刷新，提高了用户体验。在实际开发中，需要注意浏览器...
jQuery与Ajax以及序列化
10-22
在jQuery中，可以使用$.serialize()或$.serializeArray()方法进行序列化，分别将表单元素序列化为URL编码字符串或者JSON对象数组。 总结起来，jQuery与Ajax的结合极大地简化了异步Web数据交互的过程，而序列化的...
jquery序列化form表单使用ajax提交后处理返回的json数据
10-26
本篇文章将详细讲解如何使用jQuery序列化form表单，然后通过Ajax提交这些数据，并处理返回的JSON数据。 首先，让我们理解“序列化”这个概念。在Web开发中，序列化是指将表单数据转换为字符串格式，这样可以方便地...
ajax请求对象序列化,jQuery中Ajax的全局方法和表单序列化
weixin_29730445的博客
08-05 435
.load()方法是局部方法，因为他需要一个包含元素的jQuery 对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数type，即服务器返回的内容格式：包括xml...
jquery Ajax serialize()表单进行序列化方式上传文件
aguo0305的博客
04-17 939
通过Ajax serialize()表单进行序列化方式上传文件，使用FormData进行Ajax请求 通过传统的form表单提交的方式上传文件： <form id= "uploadForm" action= /cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> &l...
2021-07-29ssm框架添加
Jason980915的博客
07-29 112
1.XxDao.xml </select> <select id="selectXxById" parameterType="int" resultType="xx"> select * from xx where id=#{id} </select> <update id="updateXx" parameterType="com.pro.domain.Xx"> update xx set con
jquery ajax前后台交互的6种方式
热门推荐
qq_38409944的博客
08-02 1万+
前言： 前面学了基础的ajax感觉繁琐的真的就只想粘贴复制一键到位，本想着实现一个省市二级联动的功能，google了一下代码，真的是跟裹脚布一样又臭又长，就光那提取元素数据，创建元素，添加数据就看的烦人。 还好之前学过jquery，知道它是可以完美地封装javascript的操作，果然嘿真简单。 本来三十来行的创建ajax连接获取后台数据，就给我一行代码压缩，真的是越发展越简单。 我是直接...
jquery ajax 序列化,jQuery与Ajax以及序列化
weixin_36187176的博客
08-05 257
关于AJAX所谓Ajax，全名Asynchronous JavaScript and XML。(也就异步的JS和XML)简单点来讲就是不刷新页面来发送和获取数据，然后更新页面。Ajax的优势•无需插件支持•优秀的用户体验•提高web程序的性能•减轻服务器和带宽的负担Ajax的不足•浏览器兼容不足•破坏浏览器前进和后退按钮的正常功能•对搜索引擎的支持不足•开发和调试工具的 缺乏好吧，这些都是几年前的...
php表单提交serialize,js serialize表单信息序列化
weixin_28673669的博客
03-31 182
表单信息序列化$("form").serialize();序列化后的结果FirstName=Bill&LastName=Gates ，这样有利于ajax提交表单信息。只要获取表单对象即可获得表单中所有信息。如何提交序列化后的信息$.ajax({type:'post',url:'index.php',data:$("form").serialize(),success:functi...
jQuery序列化Ajax提交表单
tingliting的专栏
11-23 841
对于很多字段的表单想要通过Ajax动态提交，就要用到表单的序列化了。jQuery封装了一些很好的表单序列化的方法，可以很好的帮助我们实现这一功能。一下是我用Ajax和java结合做的一个添加搜索器的功能： js代码 function savesearch(){  var formData=$("form").serialize();  $("#ac").val("savesearc
jQuery实现序列化
u013218720的专栏
03-19 461
param和serialize的区别是什么？前者是对任意的参数进行URL地址格式的转换，而 后者仅属于form提交的数据转换。
ajax数据列化格式,jQuery中的ajax-（json数据格式）代码实例讲解
weixin_42515631的博客
08-06 184
一：基本内容json——javascript object notation(js原生支持)；数据格式源于javascript,易于程序员与编写，易于计算机解析和生 成，在网络上使用较广泛，几乎取代了xml格式。结构其实就是数组，对象，或者数组对象嵌套。它还支持string,number,booloean,object,array,null数据类型。这儿主要讲jquery中的ajax，因为比较简单...
form.serialize
最新发布
07-28
然后，可以使用Ajax发送POST请求，并将序列化后的表单数据作为请求的数据发送给服务器。\[1\] 在引用\[2\]中的代码示例中，使用了一个名为form-serialize的插件来序列化表单数据。通过调用serialize函数，可以将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值