Php 调试AJAX表单_Php_Html_Ajax_Forms_Debugging

Php 调试AJAX表单

php html ajax forms debugging

Php 调试AJAX表单,php,html,ajax,forms,debugging,Php,Html,Ajax,Forms,Debugging,我有一个带有HTML代码的.php文件，其中我使用AJAX调用了另一个带有HTML的php文件。表格。显然，此表单有问题，或者后面的查询有问题。问题是：当我提交它时，页面会重新加载，我无法调试我的表单当我在代码上使用preventDefault并防止表单提交时无法调试，因为查询尚未执行无法写入显示变量的html消息，因为用表单重新加载php已不存在在这种情况下，如何调试代码 File1.php $(".edit-post").click(functi

我有一个带有HTML代码的

.php

文件，其中我使用AJAX调用了另一个带有HTML的php文件。表格。显然，此表单有问题，或者后面的查询有问题。问题是：

当我提交它时，页面会重新加载，我无法调试我的表单
当我在代码上使用
```
preventDefault
```
并防止表单提交时无法调试，因为查询尚未执行
无法写入显示变量的html消息，因为用表单重新加载php已不存在

在这种情况下，如何调试代码

File1.php

    $(".edit-post").click(function(){
        var postid = $(this).attr("id");
        $.ajax({
            type: "GET",
            url: "/admin/EditProductForm.php/",
            dataType: "html",
            data: {
                ajaxpostid: postid
            },
            success: function(data){
               $('#post').html(data);
            }
        });
        $("#post").show();

    });

EditProductForm.php

<?php
$ID = $_GET["ajaxpostid"];
$post = GetProduct($ID);
if(!empty($_POST)){
...query
}
?>
<html>
  <form>
  .
  .
  .
 </form>
</html>


.
.
.

表单上的按钮可以有三种类型按钮|提交|重置，默认类型为提交

在您的案例中，您正在单击默认类型为submit的按钮，因此它是提交表单。这就是页面刷新的原因。但您希望改为应用Javascript

因此，在这些情况下，要么应用event.preventDefault（）；使用javascript代码停止表单提交，或者简单地将type=“button”添加到您的按钮，明确表示此按钮将运行javascript

type=submit -> it means button is going to submit form date
type=reset  -> it means button is going to clear form data
type=button -> it means button is going to apply javascript

<button type="button">Submit</button>

type=submit->表示按钮将提交表单日期
type=reset->表示按钮将清除表单数据
type=button->这意味着button将应用javascript
提交

首先要了解的是，尽管您的HTML和Javascript可能是由PHP交付到工作站的，但它现在运行在一个完全独立的环境中，根本无法访问PHP

服务器上运行的PHP是在服务器环境中运行的，无法访问浏览器中运行的HTML和JavaScript

提交表单时，应用程序的两个部分通过

GET

或

POST

请求的一部分发送数据进行通信，或者通过AJAX发送和接收消息。在一页中使用这两种方法是不常见的

因此，您可以分别调试这两个部分

转到您的代码：

单击按钮时会触发AJAX代码。在没有任何其他属性的情况下，该按钮还将触发

submit

。这就是导致页面重新加载的原因。由于使用AJAX更新页面，您不希望重新加载页面，因此请使用

preventDefault（）停止它
完成此操作后，您可以使用浏览器工具网络选项卡来查看消息，查看发送的内容，以及收到的响应
服务器端的事情有点尴尬，但是在适当的位置添加echo
语句可以在调试时提供有用的输出。请注意，调试服务器端不需要AJAX脚本，只需使用带有正确字段的简单HTML表单即可。如果您使用的是GET
，您甚至可以手动在命令行上键入URL和查询字符串并查看结果
然而，在您的代码中有一个基本缺陷
在AJAX代码中，您将请求类型设置为GET
（type:“GET”，
）。在PHP脚本中，您正在查找$\u GET[“ajaxpostid”]
，这是可以的，但是您开始查看$\u POST
数组，该数组将为空，因为您的AJAX调用使用了GET

现在，没有足够的代码来明确您要实现的目标。如果您的SQL查询只是检索数据以填充编辑表单，那么GET是一种合适的方法，您不应该查看$\u POST`数组
但是，您发布的代码表明，EditProductForm.php
代码正在生成HTML以执行编辑。如果是这种情况，您根本不需要AJAX，您可以从File1.php
提交表单。另一方面，如果您希望页面在不刷新的情况下转换为编辑表单，则File1.php
需要创建编辑表单并合并服务器发送的数据，而EditProductForm.php
不应执行该工作。
文件1（jquery）：

$（“.edit post”）。单击（函数（）{
var postid=$（this.attr（“id”）；
$.ajax({
键入：“获取”，
url:“./EditProductForm.php”，
数据类型：“html”，
数据：{
ajaxpostid:postid
},
成功：功能（数据）{
$（'#post'）.html（数据）；
}
});
$（“#post”）.show（）；
});  

文件2：

测试
你好，世界！
OP为什么要这样做？这能实现什么？一个好的答案将包括一些关于为什么建议的行动方案会有帮助的解释。嗨，我把我的答案编辑得更具陈述性
$(".edit-post").click(function(event){   // add the event parameter here
    event.preventDefault();              // Prevent the default action - the submit.
    var postid = $(this).attr("id");
    ...