Question

我有一个调用Post a .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的理解有点不对，不要误解我的意思，我建议你阅读更多关于它的内容并尝试使用Jquery libraries for Ajax来实现它。这些功能都有很好的记录，并有很好的例子。

使用ajax时我不会使用form标签。

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

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

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

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

Answer 2

您可以使用与jquery的ajax库检索数据相同的方式发布数据。

请参阅.post()方法。

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

Answer 3

您正在使用提交类型按钮。将类型更改为“按钮”，并使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);    
               }  
           });
      });

避免从加载新页面的PHP文件的表单操作调用

4 个答案: