ajax on使用php提交无刷新表单

ok so i know this ajax works, but i cant seem to understand why it's not submitting here.

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

submit form

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

submit button

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

i'm pretty something is wrong with the button, but i want to keep the way the button is because alot of my other forms use this same button, thanks if you can explain to me why click this submit button does nothing.

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

3 个解决方案

#1

You are selecting an <input> instead of a <button>. I had success by changing your jQuery selector from this:

您正在选择而不是

$('input[type=submit]')

to this:

$('button[type=submit]')

http://jsfiddle.net/H3Bcc/

#2

Not all browsers interpret a click attached to a submit button as submitting the form so you are effectively just negating the click of that button.

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

Preventing a form submission should preferably be captured by attaching the submit handler to the <form> when you have a <input type="submit"> or <button type="submit> so this is the best way to assure success:

当您有或

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>

#3

-1

try this :

尝试这个 :

<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);
            }
        });
    });
});

#1