Form 表单提交和 Ajax 表单提交的一些区别

最新推荐文章于 2023-11-20 10:35:57 发布

George47

最新推荐文章于 2023-11-20 10:35:57 发布

阅读量2.9k

点赞数 3

文章标签： Form表单提交和ajax 提交表单札记

自己一些心得体会：

1：form 表单提交后进行后台处理程序，没有直接返回值，只能进行后台处理，Form标签里的所有数据全部提交到后台

ajax 表单提交，是可以局部提交，具有ajax的所有属性。。。

引用：

上述两种提交方式的区别和适用场景说明
情况一：提交并刷新当前页面，或者提交后跳转到其他页面。
情况二：提交数据并展示后台返回的处理信息。
情况一比较适合采用FORM提交的方式处理，简单方便，还可以使用HTML5新添加的一些基本验证。情况二比较适合采用Ajax提交的方式处理，在success函数中对返回的信息做一些需要的操作处理，不过需要通过js对用户输入做取出操作，通过参数传递给后台处理。
根据不同的情况选择不同的处理方式，一般FORM提交处理的方式比较多的使用，Ajax更多的使用在动态加载更多元素。
FORM和Ajax使用的最大区别是：FORM需要刷新页面，而Ajax可以在不刷新页面的情况下执行数据请求或者提交数据等操作，如果需要在Ajax提交成功后刷新页面，可以调用window对象的location属性的load()方法重新加载当前文档。
---------------------
原文：https://blog.csdn.net/xiaolulululululu/article/details/78641124

form 札记：

form表单提交ajaxForm和ajaxSubmit的用法与区别
ajaxForm 需要引用 jquery.form.js

这两种方法主要的区别是ajaxForm不能主动提交form，函数只是为提交表单做准备需要以submit来触发提交。

而ajaxSubmit会主动提交表单，同时可以在点击其他按钮时也可以触发提交，不一定是submit按钮。

2：表单提交代码

form表单提交方式：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>form表单提交方式</title>
</head>
<body>
<form action="demo_form.asp" method="post"> 
    <input type="text" name="firstname" value="Mickey">    
    <input type="submit" value="提交">
</form>
</body>
</html>
//================== JS方法================================
<script>
 ① 
 <form action="demo_form.asp" method="post">  
 使用submit按钮提交表单  <input type="submit"/>
 $("form").submit(function () {
        var first = $("input[name='firstname']").val();  
        if (first == "" || first == null || first == undefined) {
            alert("first");
            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last");
            return false;/*阻止表单提交*/
        } else {
            alert("提交");
            return true;
        }
    })
提交表单数据会被发送到名为demo_form.asp的页面。submit提交表单，表单直接被提交了，可以进行验证

② 
使用 onsubmit="return function()"方法进行提交验证
<form id="Form" action="" method="post" onsubmit="return checkForm();">
   function checkForm () {
        var first = $("input[name='firstname']").val();     
        if (first == "" || first == null || first == undefined) {
            alert("first不能为空");
            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last不能为空");
            return false;
        } else {
            alert("提交")
            return true;
        }

    }

③*
 <form id="Form" action="" method="post" >使用button按钮提交表单 
 <input id="tj" type="button" value="提交" onclick="checkForm();">
    function checkForm () {
        var first = $("input[name='firstname']").val();
        var last = $("input[name='lastname']").val();

        if (first == "" || first == null || first == undefined) {
            alert("first");
            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last");
            return false;
        } else {
            alert("提交")
            $("#Form").submit();
        }
    }
注释：

onsubmit直接写false表单还是会被提交。

表单的onsubmit事件句柄（比如：onsubmit="return false"）不会执行。 不能保证由其一定会被HTML用户代理调用。

如果一个表单空间（比如一个submit类型的按钮）的name 或者id值为"submit"，则它将覆盖表单的submit方法。


④
<form id="Form" action="" method="post" onsubmit="return checkForm();">
<button type="button" onclick="subForm();">js提交</button>
利用js进行表单提交，form表单标记，将form表单中的某个元素设置点击事件，点击时调用js函数，再用js：如 $("#id").submit();等方法提交表单。
 function checkForm () {
        var first = $("input[name='firstname']").val();
        var last = $("input[name='lastname']").val();

        if (first == "" || first == null || first == undefined) {
            alert("first不能为空");
            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last不能为空");
            return false;
        } else {
            alert("提交")
            return true;
        }

    }
    function subForm(){
        $("#Form").submit();
    }
⑤
<input type="image" src=""> 图片提交表单，将input的属性设置为image时，点击图片也可触发form表单的提交
<form id="Form" action="" method="post" onsubmit="return checkForm();">
<input type="image" src="btn.png" style="width: 50px;height: 50px">
  function checkForm() {
        var first = $("input[name='firstname']").val();
        var last = $("input[name='lastname']").val();

        if (first == "" || first == null || first == undefined) {
            alert("first不能为空");
            return false;
            /*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last不能为空");
            return false;
        } else {
            alert("提交")
            return true;
        }
    }



</script>


</body>
</html>

参考：https://www.cnblogs.com/phermis/p/6993509.html

ajax 提交表单

ajax标准写法提交即可

George47

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Form 表单提交和 Ajax 表单提交的一些区别

自己一些心得体会：1：form 表单提交后进行后台处理程序，没有直接返回值，只能进行后台处理，Form标签里的所有数据全部提交到后台 ajax 表单提交，是可以局部提交，具有ajax的所有属性。。。引用：上述两种提交方式的区别和适用场景说明情况一：提交并刷新当前页面，或者提交后跳转到其他页面。情况二：提交数据并展示后台返回的处理信息。情况一比较适合采用FORM提...
复制链接

扫一扫