精华内容
下载资源
问答
  • 大家应该都知道,在静态页面提交表单到数据库很简单就是单纯的 <... </form> 这个缺点是会刷新页面,会跳转...jQuery脚本会获取form表单的数据,通过post的方式提交给api.php <!DOCTYPE HTML PUBLIC "-//W
  • 本文实例讲述了jQuery ajax提交Form表单的方法。分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移...
  • function addUser() { let data={} $.each($("#addUser").serializeArray(),function () { data[this.name]=this.value;... } 如上代码,是我写的表单验证,如何保证在验证都对了之后再跳转到ajax,现在是直接就会跳ajax

    function addUser() {

    let data={}

    $.each($("#addUser").serializeArray(),function () {

    data[this.name]=this.value;

    })

    let userName=$("input[name='userName']").val();

    let password=$("input[name='password']").val();

    let password2=$("input[name='password2']").val();

    let mobile=$("input[name='mobile']").val();

    let remarks=$("input[name='remarks']").val();

    let mobileReg=/^1[3|4|5|8][0-9]\d{4,8}$/i;

    if(userName.length==0){

    let formAlert=$("input[name='userName']").next(".form-alert");

    formAlert.show();

    formAlert.html("用户名不可以为空");

    }

    if(password.length==0){

    let formAlert=$("input[name='password']").next(".form-alert");

    formAlert.show();

    formAlert.html("密码不可以为空");

    }

    if(password2.length==0){

    let formAlert=$("input[name='password2']").next(".form-alert");

    formAlert.show();

    formAlert.html("请再次输入密码");

    }else if(password2!==password){

    let formAlert=$("input[name='password2']").next(".form-alert");

    formAlert.show();

    formAlert.html("两次密码输入不一致");

    }

    if(remarks.length==0){

    let formAlert=$("input[name='remarks']").next(".form-alert");

    formAlert.show();

    formAlert.html("备注信息不可以为空");

    }

    if(mobile.length==0){

    let formAlert=$("input[name='mobile']").next(".form-alert");

    formAlert.show();

    formAlert.html("手机号不可以为空");

    }else if(!mobileReg.test(mobile)){

    let formAlert=$("input[name='mobile']").next(".form-alert");

    formAlert.show();

    formAlert.html("手机号格式不正确");

    }

    如上代码,是我写的表单验证,如何保证在验证都对了之后再跳转到ajax,现在是直接就会跳ajax

    展开全文
  • 源码包括: 1、django的原生Form表单数据验证。 2、Ajax方式的Form表单数据验证
  • 本资源通过ajax实现对提交form表单验证,该代码不但有针对property验证,也有针对object验证,还有一个异步获取对象的实例;包含完整的代码和库文件;在myeclipse8.5和apache-tomcat-6.0.30测试通过;访问网址:...
  • 如何利用ajax提交form表单到数据库发布时间:2021-06-17 14:52:49来源:亿速云阅读:75作者:小新这篇文章主要介绍如何利用ajax提交form表单到数据库,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们...

    如何利用ajax提交form表单到数据库

    发布时间:2021-06-17 14:52:49

    来源:亿速云

    阅读:75

    作者:小新

    这篇文章主要介绍如何利用ajax提交form表单到数据库,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

    大家应该都知道,在静态页面提交表单到数据库很简单就是单纯的

    这个缺点是会刷新页面,会跳转页面的。

    今天给大家带来的技术就是ajax提交表单

    优点是不刷新页面,不跳转页面,静默提交的。

    至于什么是ajax,自己去百度了解。

    首先我们得要有一个表单提交页面:

    index.html

    这个页面由两个部分组成

    1、表单控件

    2、jQuery+ajax处理脚本

    jQuery脚本会获取form表单的数据,通过post的方式提交给api.phpHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    login test

    function insert() {

    $.ajax({

    type: "POST",//方法

    url: "api.php" ,//表单接收url

    data: $('#form1').serialize(),

    success: function () {

    //提交成功的提示词或者其他反馈代码

    var result=document.getElementById("success");

    result.innerHTML="成功!";

    },

    error : function() {

    //提交失败的提示词或者其他反馈代码

    var result=document.getElementById("success");

    result.innerHTML="失败!";

    }

    });

    }

    下面就是表单接收页面

    api.php

    该页面其实很简单

    就是连接数据库

    然后插入数据库

    插入数据库的两个值为

    title和url<?php

    $title = $_POST['title'];

    $url = $_POST['url'];

    $con = mysql_connect("localhost","root","root");

    if (!$con)

    {

    die('Could not connect: ' . mysql_error());

    }

    mysql_select_db("test", $con);

    mysql_query("INSERT INTO testdata (title, url)

    VALUES ('$title', '$url')");

    mysql_close($con);

    ?>

    然后我们需要建立好一个数据库

    数据库名为test,表名为testdata

    下面是数据库截图

    f2c8a70cb085c398df1690dae5be3d62.png

    到此,本次案例完成。

    当然上面的代码只是简单的实现了ajax提交form表单

    但是还有很多细节需要优化,例如表单验证,数据加密等,可以自己拓展学习,完善。

    以上是“如何利用ajax提交form表单到数据库”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

    展开全文
  • 我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单...1.ajaxForm 增加所有需要的事件监听器
  • 在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键唯一的报错...

    在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键唯一的报错。

    那么,如何实现呢,首先,需要再form表单处加入οnsubmit=“return 方法名();”

    第二步,写方法,下面是我的例子,供大家参考:

    <!--js普通校验-->
    function compare(){
    var password = document.getElementById("password").value;
    	var password2 = document.getElementById("password2").value;
    	if(password!=password2){
    		alert("两次输入的密码不一致!!");
    		return false;
    	}
    }
    

    这时候,就遇到了问题,(我的其他文章中有js方法的详细终止方式) ajax不是普通的js方法,不能通过return false;终止运行,如何做呢?
    这时候就需要用到一点编程的思考–>我们可以定义变量来返回,发生错误时修改变量即可,代码如下:

    function checkDate() {          
        var result = true;         //定义返回标识
         $.ajax({
                 async: false,    //设置为同步
                 type: "post",
                 url: "/Mall/Channel/CheckChannelDate",
                 data: { startDate: $("#PayStartTime").val() },
                 success: function (data) {
                          if (data != 'ok') {
                              alert(data);
                              result = false
                              }                                    
                         }
                    });
                    return result; //在ajax方法外层返回true or false
            }
    

    这里需要特别注意一点:因为ajax是异步的,所以按照常规的写法,即使验证返回了false,表单也会被submit。所以上面的 async: false, 是必须要写的,我尝试过不加,结果js最后才执行ajax方法,结果就不是预期你想要的那个了。

    以上!如果有帮到你,点赞、评论、加关注哟!!!

    展开全文
  • 在静态页面提交表单到...首先我们得要有一个表单提交页面:index.html这个页面由两个部分组成1、表单控件2、jQuery+ajax处理脚本jQuery脚本会获取form表单的数据,通过post的方式提交给api.phplogin testfunction ...

    在静态页面提交表单到数据库很简单就是单纯的

    这个缺点是会刷新页面,会跳转页面的。今天给大家带来的技术就是ajax提交表单,优点是不刷新页面,不跳转页面,静默提交的。

    首先我们得要有一个表单提交页面:

    index.html

    这个页面由两个部分组成

    1、表单控件

    2、jQuery+ajax处理脚本

    jQuery脚本会获取form表单的数据,通过post的方式提交给api.php

    login test

    function insert() {

    $.ajax({

    type: "POST",//方法

    url: "api.php" ,//表单接收url

    data: $('#form1').serialize(),

    success: function () {

    //提交成功的提示词或者其他反馈代码

    var result=document.getElementById("success");

    result.innerHTML="成功!";

    },

    error : function() {

    //提交失败的提示词或者其他反馈代码

    var result=document.getElementById("success");

    result.innerHTML="失败!";

    }

    });

    }

    下面就是表单接收页面

    api.php

    该页面其实很简单

    就是连接数据库

    然后插入数据库

    插入数据库的两个值为

    title和url<?php

    $title = $_POST['title'];

    $url = $_POST['url'];

    $con = mysql_connect("localhost","root","root");

    if (!$con)

    {

    die('Could not connect: ' . mysql_error());

    }

    mysql_select_db("test", $con);

    mysql_query("INSERT INTO testdata (title, url)

    VALUES ('$title', '$url')");

    mysql_close($con);

    ?>

    然后我们需要建立好一个数据库

    数据库名为test,表名为testdata

    下面是数据库截图

    b7f41f9bcf5d075ea69ad2d13d504a50.png

    到此,本次案例完成。

    当然上面的代码只是简单的实现了ajax提交form表单

    但是还有很多细节需要优化,例如表单验证,数据加密等,可以自己拓展学习,完善。

    相关推荐:

    展开全文
  • form标签中添加Action(提交的地址)和method(post),且有一个submit按钮()就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交。 1、input[type=submit] input[type]默认值为text 设置...
  • Ajax发送请求详解: (1). url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。 (2). type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和...
  • Ajax提交form表单到写入数据库实例

    千次阅读 2020-03-27 11:47:07
    静态页面提交表单到...今天给大家带来的技术就是Ajax提交form表单到写入数据库实例,优点是不刷新页面,不跳转页面,静默提交到数据库的。 首先我们得要有一个表单提交页面: index.html 这个页面由两个部分组...
  • ajax 表单提交,是可以局部提交,具有ajax的所有属性。。。 引用: 上述两种提交方式的区别和适用场景说明 情况一:提交并刷新当前页面,或者提交后跳转到其他页面。 情况二:提交数据并展示后台返回的处理信息。...
  • 这是业余时间写的一个小例子 可以实现ajax提交 juqery validate插件表单验证 blockUI遮罩等待效果 可以学习使用
  • PHP+Jquery+AJAX POST,GET提交表单并接收返回
  • ajax模拟form表单提交

    2021-06-12 16:01:12
    AJAX表单提交以及数据接收我现在想实现这样一个效果 chat.html中有一个表单chat,按下提交按钮后chajax是一种传输方式,数据不是提交ajax,而是 数据 由 ajax提交到后台(并不刷新页面) 要实现一个简单的ajax请CSS...
  • ajax验证form表单内容是否为空

    千次阅读 2018-07-12 16:29:57
    ex.function checkSubmit(validForm){ //括号内validForm为html表单name属性 if(validForm.createdtime.value==''){ //createdtime为输入框name属性 alert('时间不能为空!'); validForm.createdtime.focus(); ....
  • ajax提交form表单到数据库(无刷新)

    千次阅读 2018-02-16 20:35:01
    今天给大家带来的技术就是ajax提交表单优点是不刷新页面,不跳转页面,静默提交的。至于什么是ajax,自己去百度了解。首先我们得要有一个表单提交页面:index.html这个页面由两个部分组成1、表单控件2、...
  • 要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件——jquery validate.js 和 jquery form.js.具体详细说明情况下文。 1、jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单...
  • 设置表单的onsubmit="return login()",让login函数返回false,注意false小写,Python写惯了,之前写成False。 html代码: <form method="POST" id="login_form" onsubmit="return login()"> <div ...
  • ajax上传form表单的原始方式,是将form表单中所需要的键值对先获取,然后再组装成数据(两种方式:http:localhost:8080/test.do?pe ... Form 表单用 Ajax 提交数据并用 jQuery Validate 验证 表单填写需要验证可用插件 ...
  • Ajax提交表单时实现验证码自动验证,验证码先检测正确性,不正确则不提交表单,更新验证码,php后端验证码检测,感兴趣的小伙伴们可以参考一下
  • 由于validtion 没有手机号验证这个功能,所以只好添加自定义的验证方式。代码如下:// 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile...
  • form表单提交文件修改为ajax提交

    千次阅读 2020-11-11 16:22:56
    今天主要说的就是在融合代码时,将原来的form表单提交文件修改为ajax提交后台数据的方式。代码如下: 前端jsp: <%-- --%> (请上传格式为"jpg,png,pdf"的附件,文件大小不得超过10MB) 从上边代码可以看出将原来的form...
  • 使用layui表单通过ajax验证不通过form表单依然会提交的问题的解决 功能是新增一个数据,需要验证该数据是否已经存在.通过ajax查询后台,返回验证结果. 使用layui form.verify 自定义验证规则.出现的问题是后台返回...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,451
精华内容 13,780
关键字:

ajax提交form表单验证