Question

好吧所以我知道这个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>

我的按钮很糟糕，但是我想保持按钮的方式，因为很多我的其他表单使用相同的按钮，谢谢你能解释为什么点击这个提交按钮什么也不做。

Answer 1

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

$('input[type=submit]')

到此：

$('button[type=submit]')

http://jsfiddle.net/H3Bcc/

Answer 2

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

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

<强>的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>

Answer 3

试试这个：

<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 on使用php提交无刷新表单

3 个答案: