精华内容
下载资源
问答
  • ajax异步提交表单

    2017-07-20 09:00:53
    ajax提交的jq版本,相当实用
  • ajax异步提交form表单

    2019-08-15 23:23:45
    在web开发中,经常会遇到:提交表单后无需更新页面并将新的数据展示在页面上,这就需要使用ajax提交form表单的方式进行提交。 二、方法(以flask框架为例) 2.1、前端部分 1.form表单只需要写一个id值与js进行数据...

    一、前言

    在web开发中,经常会遇到:提交表单后无需更新页面并将新的数据展示在页面上,这就需要使用ajax提交form表单的方式进行提交。

    二、方法(以flask框架为例)

    2.1、前端部分

    在这里插入图片描述
    1.form表单只需要写一个id值与js进行数据交互
    2.(坑一)若开启了crsf防护,记得加上:
    在这里插入图片描述
    3.(坑二)要在button标签中加上 type=“button”,不能为空(会将表单数据显示在地址栏)或写成type=“submit”

    2.2、js部分

    在这里插入图片描述

    三、总结

    button标签的类型一定要记得改!!!!!

    展开全文
  • Ajax异步提交form表单

    2021-02-03 05:18:55
    为什么我要用ajax异步提交? 因为我想实现那种后端发送前端数据密码错误等类似的信息,这里就只需要提交一个用户名密码或者验证码等信息提交到后端,然后后端反馈登录信息。 HTML代码: <form class="login-...

    学了一个周jquery,做了一堆脑瘫动画,终于能学到能用上的东西了!

    几个注意点:

    form控件默认为get传值,form控件中的按钮会冲突

    为什么我要用ajax异步提交?

    因为我想实现那种后端发送前端数据密码错误等类似的信息,这里就只需要提交一个用户名密码或者验证码等信息提交到后端,然后后端反馈登录信息。

    HTML代码:

     <form class="login-form" action="" method="post">
                <h1>登录</h1>
                    <div class="social-container">
                        <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                        <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                    <span>或使用您的帐号</span>
    {#                name和type的前后顺序是有关系的 必须name在前#}
                    <input name="username" class="username" type="text"  placeholder="用户名">
                    <input name="password" class="password" type="password"  placeholder="密码">
                    <a href="#">忘记密码?</a>
                     <input type="button"  class="login-button"value="登录"/>
    
              </form>

    注意点:此处按钮只能是input标签,不可以是<button>否则就会出现明明用了ajaxpost传值,实际上效果是get传值

    JS代码

    <script src="/static/js/jquery-1.10.1.js"></script>
    <script>
        $(function() {
    	$(".login-button").click(function() {
    		login_user = $(".username").val();
    		login_pass = $(".password").val();
    		if (login_pass == "" || login_user == "") {
    			alert("用户名或者密码不能为空!");
    			return; //直接返回
    		}
    		console.log("用户名" + login_user);
    		console.log("密码" + login_pass);
    		var urls = "/user_login/" //接口地址
    		$.ajax({
    			url: urls,
    			data: $('.login-form').serialize(),
    			//将表单数据序列化,格式为name=value
    			type: 'POST',
    			dataType: 'json',
    			success: function(data) {
    				//success
    				if (data.code == 200) {
    					alert("登录成功");
                        location.href = "/login" //再次请求下login,此时会进入后端通过session判断登录状态 直接进首页
    				} else if (data.code == 400) {
    					alert("用户名或者密码错误");
    				} else if (data.code == 301) {
    					alert("用户未激活");
    				}
    			},
    			error: function() {
    				console.log("提交ajax函数异常");
    				alert("异常错误")
    			},
    
    		});
    
    	});
    });
    </script>

    django 后端代码

    def user_login(request):
        '''状态码 登录成功:200 密码错误:400 账户未激活:301 '''
        res = {"code": 200, "msg": ""}
        if request.method =='POST':
            username = request.POST.get('username', '')
            password = request.POST.get('password', '')
            print("用户名",username)
            print("密码",password)
            #验证用户名密码是否正确
            user = authenticate(username=username, password=password)
            if user:
                if user.is_active:
                    #使用内置login函数登录 返回值:session, META, csrf_cookie_needs_reset
                    login(request, user)
                    #登录成功返回首页
                    # return render(request,"index.html")
                    ##2021年2月2日11:53:07 修改为ajax 登录成功返回code = 200
                    res['code'] = 200 ;
                    res['msg'] = "登录成功"
                else:
                    #create_user 创建新用户的时候 is_active 默认是1,也就是True
                    res['code'] = 301 ;
                    res['msg'] = "账户未激活";
            else:
                res['code'] = 400 ;
                res['msg'] = "用户名或密码错误"
        elif request.method =='GET':
            return redirect("/login")#如果是get 就返回登录界面
        #In order to allow non-dict objects to be serialized set the safe parameter to False. 添加safe=False
        print(res);
        return JsonResponse(res,safe=False)
    

    实现效果:
     

    登录成功实现跳转

    展开全文
  • AJAX异步提交form表单

    千次阅读 2018-08-07 21:06:39
    比如说有如下form:   &lt;form id="form1" name="form1" action="" method="post"&gt; &lt;input type="hidden" name="submit...

    比如说有如下form:

     
    1. <form id="form1" name="form1" action="" method="post">

    2. <input type="hidden" name="submitTime" value="${now }">

    3. <input type="hidden" name="receiverId" value="${receiverID }">

    4. <input type="hidden" name="isRegister" value="${isRegister }">

    5. </form>

            

    发送异步请求提交form:

     
    1. function save(){

    2.  
    3. $.ajax({

    4. url:'debt/saveNew.do'+'?t='+Math.random(),

    5. data:$('#form1').serialize(), //将表单数据序列化,格式为name=value

    6. type:'POST',

    7. dataType:'json',

    8. success:function(data){

    9. //success

    10. },

    11. error:function(){

    12. console.log("提交ajax函数异常");

    13. },

    14.  
    15. });

    16. }

     

     

     

    获取(能从param中取到值意味着怎么接收都可):

     
    1. @RequestMapping(value = "saveNew")

    2. //@Token(remove=true)

    3. public void saveNew(

    4. HttpServletRequest request,HttpServletResponse response){

    5. response.setContentType("application/json; charset=UTF-8");

    6. try {

    7. String submitTime = request.getParameter("submitTime");

    8. String receiverId = request.getParameter("receiverId");

    9. String isRegister = request.getParameter("isRegister");

     

    展开全文
  • ajax 异步提交form 表单

    2017-04-26 14:49:53
    挺好用的异步提交form表单的js代码 。 不需要其他插件。害怕忘记,写下做记录

    页面写法:


    js  写法:





    后台 java :



    展开全文
  • AJAX异步提交FORM表单

    2018-04-02 16:24:19
    <form id="form1" onsubmit="return false" action="##" method="post"> 用户名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p> 密 码:...
  • 下面小编就为大家带来一篇AJAX PHP无刷新form表单提交的简单实现(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • AJAX如何异步提交form表单 一、提交form表单如下: <form id="commentform" th:action="@{/html/homework/save/comment}" method="post" th:object="${comment}"> <input type="hidden" th:field="*{...
  • 本文实例讲述了jQuery ajax提交Form表单的方法。分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移...
  • 提交按钮的type属性的值,从submit改成button
  • 主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
  • 通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。 但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的 不过如今主流浏览器都开始支持...
  • ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)
  • 使用AJAX异步提交表单的几种方式

    万次阅读 多人点赞 2016-04-07 17:22:45
    这里介绍三种常用的提交方式方式一手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器$.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1...
  • 表单提交(同步提交) HTML文件: PHP文件: 这样就能接收到HTML里输入的内容,注意: FORM表头method为POST,PHP文件获取的方法就是$_POST,method为GET,PHP的获取方法就是$_GET,另外登录(提交按钮...
  • ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方法。 AJAX 基于 JavaScript 和 HTTP 请求(HTTP requests)的,...
  • 使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的; 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据包括文件流的话,就需要使用...
  • Ajax异步提交带文件上传的Form表单

    千次阅读 2019-04-25 16:36:22
    Ajax异步提交带文件上传的Form表单 前端代码 <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>Your email address:</label> <input type="email" ...
  • 废话补多少,我的问题是我想发送ajax异步请求,这样就能异步提交表单,并且不会跳转到别的页面,也不会将返回的json数据在页面显示了,所以我选择了异步请求,但是异步请求时的form上的action="/xxxxxxx"没有去掉,所有走...
  • jQuery异步提交表单(有实例)

    万次阅读 2017-05-30 00:11:18
    前言:我们在开发的时候,一定会使用ajax异步提交表单,在这里总结一下:前提准备:引入脚本 <!--jquery需要引入的文件--> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script> <!...
  • Ajax异步提交表单

    千次阅读 2019-03-31 08:39:46
    Ajax异步提交表单 开发工具与关键技术:VS2015, HTML5, JavaScript 作者:张金荣 撰写时间:2019 年 3月 28 日 先简单介绍一下Ajax异步提交: 异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他...
  • jquery.form.js (异步提交,页面无刷新提交FORM), 1.需要引用jquery 2.引用JS后, $("form").ajaxSubmit(function (responseResult) { //responseResult 为从后台返回信息});
  • jdngao+bootstrap的ajax提交form表单Demo,完整实例代码: 1,html代码 {% load bootstrap3 %} &lt;form enctype="multipart/form-data" id="form" method="post" class=&...
  • 今天给大家介绍的是当下很流行的框架layui中的一个小案例、就是form表单监控提交并且使用ajax异步提交验证数据。在layui中我们想使用哪个模块就要layui.use(‘form’,function{});这种形式要引用form内置模板,下面...
  • form id="p"> 权限名称: <input name="name" type="text" th:value="${p}==null?'':${p.name}"> <br> URI: <input name="uri" type="text" th:value="${p}==null?'':${p.uri}"><br> ...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...//$Form ...form = ...'form' ...(form). ...(form). ...提交 </form> 转载于:https://my.oschina.net/u/3677751/blog/1574598
  • Form表单提交:一般都会进行页面跳转; Ajax异步提交:可以不进行页面跳转; Form表单提交 <body> <div id="forms”> <form id="form1" action="/users/login" method="post"> <p...
  • 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新; 这样我们可以先到异步Ajax可以实现局部刷新; 废话不多说了 直接上代码; 首先是html: <form id = "form_insert" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,125
精华内容 12,450
关键字:

ajax异步提交form表单