请问大家~使用普通的表单提交和使用AJAX提交的性能对比那个比较高效？？

Posted 2023-05-06

我个人认为AJAX好点 因为一般的网页系统都不会很大，而且做提交用的表单很少涉及到数据库的读取，所以对服务器的负担按道理不会很大，除非你频繁使用AJAX。 AJAX做提交页面不刷新，这样如果同一个页面有两个表单又不会因为一个提交而丢失另一个表单内的数据。 参考技术A AJAX提交 好 但加重了服务器的负担 参考技术B 如果提交表单之后不跳转，肯定是使用ajax性能好；如果跳转到其他页面，性能比较无意义

使用 preventDefault 提交 Ajax 表单

【中文标题】使用 preventDefault 提交 Ajax 表单

【英文标题】：Ajax Form submit with preventDefault

【发布时间】：2013-12-19 14:34:43

【问题描述】：

我有一个普通的 HTML 表单，它应该防止默认表单提交并通过 Ajax 发布值。它不适用于我的设置请帮助我哪里出错了。 将我视为 Jquery 中的新手，javascrip

 <link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/jquery.multiselect.css">

<link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/jquery-ui.css">
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.js">     </script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.form.js"></script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.multiselect.js"></script>
<script type="text/javascript">
    $(function()

       $("select").multiselect(
          selectedList: 4
       );

    );
</script>
<script type="text/javascript">
var frm = $('#contactForm1');
frm.submit(function (ev) 
    $.ajax(
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) 
            alert('ok');
        
    );

    ev.preventDefault();
);

我的表单看起来像

<form action=index1.php id="contactForm1" method="post">
<p>
    <select name="example-list[]" multiple="multiple" style="width: 400px; display: none;">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>

    </select>
</p>
<input class="text"  type="submit"  value='GO'>
 </form>
 </body>
 </html>

【问题讨论】：

AFAIK, ev.preventDefault(); 应该首先出现。而且你应该将你的代码包装在 dom 就绪事件中。

【参考方案1】：

将提交按钮设置为type="button"，而不是type="submit"，

假设提交按钮的 ID 为 submit-button。您可以像这样在 javascript 中提交表单：

$("#submit-button").click(function() 
 //send ajax
)

【参考方案2】：

将您的代码封装在DOM Ready中

$(function () 
    var frm = $('#contactForm1');
    frm.submit(function (ev) 
        $.ajax(
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) 
                alert('ok');
            
        );
        ev.preventDefault();
    );
);

【讨论】：

我会将 preventDefault 移到 Ajax 之前，以防 ajax 部分出现错误时无法正常提交表单

【参考方案3】：

$('#submit').click(function(e)

    //call ajax

e.preventDefault();
)

【参考方案4】：

即使使用preventDefault()，提交表单时页面是否刷新？

在您的表单上，将# 放入操作属性并删除method。

修改你的JS代码

var frm = $('#contactForm1'); frm.submit(function (ev) ev.preventDefault(); $.ajax( type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) alert('ok'); ); );

将preventDefault 放在 ajax 触发之前。您的代码中发生的情况是，您的表单正在使用 HTML 中提供的操作和方法执行，因此您的 JS 无法捕获它。