避免表单操作调用php文件加载新页面 - Avoid form action call to php file from loading new page

Avoid form action call to php file from loading new page

我有一个窗体，它调用Post .php文件，我认为这是ajax推送的基础(而不是用ajax检索数据)。不幸的是，我的浏览器总是加载我调用的.php文件，而不是停留在包含表单的页面上。我想我可能忘记了某一行代码。我应该找什么?

<form id="form-upload" enctype="multipart/form-data" action="_scripts/ajax/cropImage.php" method="post" onsubmit="return checkCoords();" style="min-height:450px; position:relative;">
                    <input type="hidden" id="x" name="x" />
                        <input type="hidden" id="y" name="y" />
                        <input type="hidden" id="w" name="w" />
                        <input type="hidden" id="h" name="h" />
                    <input type="hidden" id="ht" name="ht" />
                    <input type="hidden" id="wt" name="wt" />
                    <div style="position:absolute">
                    <h2>Upload a picture</h2>
                    <input id="input-upload" name="input-upload" type='file' onchange="readURL(this);" /><br/>
                    <img id="upload-preview" src="" alt="" />
                    <div style="position:absolute; bottom:0;">
                        <input type="submit" value="Upload" />
                        <input type="button" value="Cancel" onclick="$('#fancybox-close').trigger('click');"/>
                    </div>
                    </div>
                    <img id="spinner" style="position:absolute; background-color:transparent; left:49%; top:50%;" src="_images/uploads/ajax-loader.gif" height="32" width="32"/>
                </form>

似乎你对AJAX的理解有一点错误，不要误会我，我建议你多读一些关于AJAX的知识，并尝试使用Jquery库来实现它。这些函数都有很好的文档和很好的示例。

我不会在使用ajax时使用表单标签。

这是你在使用"submit" the data时使用的一个示例函数:

$.post("_scripts/ajax/cropImage.php", { 
                                       "y": yValue, 
                                       "x": xValue, 
                                       "h": hValue, 
                                          ...
                                       "input-upload": inputUploadValue
                                      });

解释:你将把对象的所有值("y"， "x"等)作为POST变量发送到"_scripts/ajax/cropImage.php"。你也可以创建一个回调函数，从你发送这些值的URL接收数据，并验证是否一切正常。

看起来您正在使用表单的action属性并提交它。请给我们看一下你们所有的相关代码。(显示代码前的文本)

可以像使用jquery的ajax库检索数据一样发布数据

参见.post()方法

您可以获取输入字段的内容，然后使用ajax发送它们。如果你想保持当前的表单结构，你可以使用doSubmit();返回错误;在onsubmit事件中取消原来的提交，并使用您的ajax方法

您正在使用提交类型按钮。将类型更改为button，并将onclick事件设置为:

onclick="sendData();"

sendData()函数应该包含适当的AJAX。我看到你正在使用jQuery，所以只需使用内置的ajax函数:

$.ajax({
  url: "_scripts/ajax/cropImage.php",
  context: document.body,
  success: function(html){
    alert(html);
  }
});

$('#btnSubmit').click(function() {  
    // we want to store the values from the form input box, then send via ajax below  
   var comment = $('#comments').val();  
   var name = $('#Name').val();
           $.ajax({  
               type: "POST",  
               url: "contactus.php",
              // data: "fname="+ fname +"& lname="+ lname,  
               data: "name="+ name +"& comment="+ comment,  
               success: function(response){ 
                $('#mail_sent').html(response);    
               }  
           });
      });