避免加载新页面时对 php 文件进行表单操作调用

Question

我有一个调用 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>

Answer 1

看来你对 AJAX 的理解有点错误，不要误会我的意思，我建议你阅读更多相关内容并尝试使用 用于 Ajax 的 Jquery 库。这些函数有很好的文档记录并且有很好的例子。

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

这是使用“提交”数据时将使用的示例函数：

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

解释：您将把对象上的所有值（“y”、“x”等）发送到“_scripts/ajax/cropImage.php”，作为 POST变量。您还可以创建一个回调函数，从您发送这些值的 URL 接收数据，并验证一切是否运行良好。

您似乎正在使用表单的操作属性并提交它。请向我们展示您的所有相关代码。（显示代码之前的文字）

Answer 2

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

请参阅 .post() 方法。

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

Answer 3

您正在使用提交类型按钮。
将类型更改为“button”，并使 onclick 事件类似于：

onclick="sendData();"

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

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

Answer 4

$('#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);    
               }  
           });
      });