Ajax 忽略 SQL

Question

我还有其他类似的功能，但是当我单击时，Ajax 被发布，但我的页面最初会刷新，直到我添加 event.preventDefault。我已经被难住了好几个小时了，我看不到问题所在..

这是我的 AJAX：

 $(function(){
$(document).on('click','.addnewproject',function(){
    event.preventDefault();
    var curaid= $(this).attr('id');
    var $ele = $(this);
    $.ajax({
        type:'POST',
        url:'components/sql/insertproject.php',
        data:$("#addnewprojecttable").serialize(),
        success: 
        function(data){ 
        $(".image-list" + curaid).append(
                '<li id="projectfolder' + curaid + '">\n\
           <img width="35px" onclick="openproject('+ curaid +')" style="cursor: pointer;" src="img/folder.png" /> \n\
            <p>Project ' + curaid + '</p> \n\
            ');
        }

        });
    });

});

我的 HTML：

<form  id="addnewprojecttable" method="post" >
<table>
<tr> 
<td> 
<input style="display:none;" name="username" id="username" value="<?php  echo "" . $_SESSION['username']; ?>" type="text"/>
<input style="float:left; width:100%; height:20px; margin-bottom: 20px;" name="projectname" id="projectname" type="text" placeholder="projectname"/>
<input style="float:left; width:100%; height:20px; margin-bottom: 20px;" name="contactname" id="contactname" type="text" placeholder="contactname"/>
<input style="float:left; width:100%; height:20px;  margin-bottom: 20px;" name="contactemail" id="contactemail" type="text" placeholder="contactemail"/>
<input style="float:left; width:100%; height:20px;  margin-bottom: 20px;" name="contactphone" id="contactphone" type="text" placeholder="contactphone"/>

<input style="float:left; width:100%; height:20px;" name="description" id="description" type="text" placeholder="description"/>
<input style="float:left; width:100%; height:20px;" name="notes" id="notes" type="text" placeholder="notes"/>



<button class="addnewproject" id="<?php echo $row["accid"]; ?>" >Add</button>
<button  onclick="closenewprojectwindow()">Cancel</button>
</td> 
</tr>

</table>
</form>

我的 SQL：

<?php
include 'config.php';

$sqlupdateincome = "INSERT INTO projects (username, projectname)
VALUES ('". $_POST['username'] ."', 'Ochrom Test Project')";

if ($conn->query($sqlupdateincome) === TRUE) {
    echo "New record created successfully";
} else {
     echo  "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

这是我的数据库，以防万一。 click for image

我非常感谢所有的帮助和回复，谢谢！

Answer 1

让我们分解一下。你有一个form 标签，这意味着你想提交一个表单。如果没有action 属性，您将听从浏览器的意愿，但几乎所有人都会在同一个页面上提交表单。

<form  id="addnewprojecttable" method="post">

再往下，仍在form 内，您有一个button。 button 的默认操作是提交 form unless you have modified the function of the button with Javascript，这就是你所拥有的。

<button class="addnewproject" id="<?php echo $row["accid"]; ?>" >Add</button>

我根本不使用 JQuery，但我可以阅读它足以理解您在做什么。您对button 的修改代码是这样说的。请勿使用此行提交表单：

event.preventDefault();

然后继续函数中的其余代码。

没有这一行，函数的其余部分仍然会被执行，并且表单也会被提交给它自己（HTML 的默认操作）。也可能是浏览器在表单提交之前没有完成对 Javascript 函数的操作（结果不一致 - 不是一件好事）。

根据您的布局，有时您可能需要以下内容，但这确实是另一个讨论。

event.stopPropagation();
event.preventDefault();

最好让您的 HTML 在不启用 Javascript 的情况下也能正常工作。出于这个原因，我也会推荐在您的form 中包含action。

注意：您的 SQL 也是 open to SQL Injection。

编辑：

config.php 和 components/sql/insertproject.php 的完整路径是什么？

在insertproject.php 上，将以下内容添加到顶部：

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

然后当您直接访问 URL /components/sql/insertproject.php 时会发生什么情况？是否显示错误？