使用php提交不刷新表单的ajax答案

【问题标题】：ajax on submit no refresh form using php使用php提交不刷新表单的ajax
【发布时间】：2013-12-21 12:33:18
【问题描述】：

好的，所以我知道这个 ajax 有效，但我似乎无法理解为什么它没有在这里提交。

<script type="text/javascript">
$(function(){
    $('input[type=submit]').click(function(){
        $.ajax({
            type: "POST",
            url: "postitem.php",
            data: $("#myform").serialize(),
            beforeSend: function(){
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data){
                $('#result').html(data);
            }
        });
    });
});

提交表格

<form action="" method="post" onsubmit="return false;" id="myform">

提交按钮

<input type="hidden" value="Post" name="submit" /> 
<button type="submit" title="Done" style="height:33px; width:50px">
    <img src="../../css/images/plus_25.png" />
</button>

我的按钮有点问题，但我想保持按钮的方式，因为我的许多其他表单都使用相同的按钮，谢谢你能向我解释为什么点击这个提交按钮什么都不做。

【问题讨论】：

您的表单中没有input[type=submit]。你有一个button[type=submit] 和一个input[type=hidden]
所以只需将 input[type=sumbit] 更改为 button[type=submit] ？
<button type="submit"> 毫无意义。 type 仅存在于 <input>。
type 属性对<button> 有效：developer.mozilla.org/en-US/docs/Web/HTML/Element/…

标签： javascript php jquery ajax forms

【解决方案1】：

并非所有浏览器都将附加到提交按钮的click 解释为提交表单，因此您实际上只是在否定单击该按钮。

当您有<input type="submit"> 或<button type="submit> 时，最好通过将submit 处理程序附加到<form> 来捕获防止表单提交，因此这是确保成功的最佳方式：

jQuery

$(function(){
    $('#myform').on('submit', function(e){

        // prevent native form submission here
        e.preventDefault();

        // now do whatever you want here
        $.ajax({
            type: $(this).attr('method'), // <-- get method of form
            url: $(this).attr('action'), // <-- get action of form
            data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
            beforeSend: function(){
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data){
                $('#result').html(data);
            }
        });
    });
});

HTML

<form action="postitem.php" method="POST" id="myform">
    <input type="hidden" value="Post" name="submit" /> 
    <button type="submit" title="Done" style="height:33px; width:50px">
        <img src="../../css/images/plus_25.png" />
    </button>
</form>

【讨论】：

你忘记了括号。 e.preventDefault()
同意，这是更好的做法。但它没有回答原始代码为何失败的 OP 特定问题。
你能告诉我如何使用 e.preventdefault() 编写代码；
当然可以，在我上面给出的代码中，您对此有什么具体问题吗？
糟糕的是，我使用句号而不是逗号，新的更新反映了这一点：$('#myform').on('submit', function(e){

【解决方案2】：

试试这个：

<script type="text/javascript">
$(function(){
    $('input[type=submit]').click(function(e){
e.preventDefault(); // prevent the browser's default action of submitting 
        $.ajax({
            type: "POST",
            url: "postitem.php",
            data: $("#myform").serialize(),
            beforeSend: function(){
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data){
                $('#result').html(data);
            }
        });
    });
});

【讨论】：

等等，为什么要这样做？我是 ajax 新手
这将阻止浏览器默认操作提交，而是使用ajax提交

【解决方案3】：

您选择的是<input>，而不是<button>。通过更改您的 jQuery 选择器，我取得了成功：

$('input[type=submit]')

到这里：

$('button[type=submit]')

http://jsfiddle.net/H3Bcc/

【讨论】：