javascript - 使用AJAX使用按钮将表单信息发送到另一个页面

标签 javascript php jquery mysql ajax

您好,我有两个文件应该相互关联。我想向另一个使用 sql 查询发送表单信息的页面发送 AJAX 请求。

我要创建的应用程序是一个包含八个问题的调查问卷,每个问题都有四个答案配对在一起具有相同的 ID (qid),每个答案都有一个来自数据库的值。回答八个问题后,您将看到一个按钮,该按钮将 AJAX 请求发送到页面 test.php(名为 submitAJAX)。

问题是,尽管我与 AJAX 的连接正常,但表单中的值并未发送到我的数据库。以前我认为问题可能出在表单页面上,但现在我认为问题出在这个文件上:

test.php(带json的文件)

<?php
$localhost = "localhost";
$username = "root";
$password = "";
$connect = mysqli_connect($localhost, $username, $password) or die ("Kunde inte koppla");
mysqli_select_db($connect, 'wildfire');
if(count($_GET) > 0){
   $answerPoint = intval($_GET['radiobtn']);
   $qid = intval($_GET['qid']);
$tid = intval($_GET['tid']);
   $sql2 = "INSERT INTO result (qid, points, tid) VALUES ($qid, $answerPoint, $tid)";
   $connect->query($sql2); 
   $lastid = $connect->insert_id;
   if($lastid>0) {
    echo json_encode(array('status'=>1));
}
   else{
    echo json_encode(array('status'=>0));
} 
}
?>

我认为问题可能出在以下行:if($lastid>0) { $lastid 应始终大于 0,但每当我检查 test.php 时,我都会收到此消息:{"status":0} 我的目的是收到此消息:{"status ":1}

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
<?php
$localhost = "localhost";
$username = "root";
$password = "";
$connect = mysqli_connect($localhost, $username, $password) or die ("Kunde inte koppla");
mysqli_select_db($connect, 'wildfire');

$qid = 1;
if(count($_POST) > 0){
    $qid = intval($_POST['qid'])+1;

}


?>

<form method="post" action="">
<input type="hidden" name="qid" id="qid" value="<?=$qid?>">
<?php
$sql1 = mysqli_query($connect,"SELECT * FROM question where answer != '' && qid =".intval($qid));
while($row1=mysqli_fetch_assoc($sql1)){
?>
<input type='radio' name='answer1' class="radiobtn" value="<?php echo $row1['Point'];?>">
<input type='hidden' name='tid' class="tid" value="<?php echo $row1['tid'];?>">
<?php echo $row1['answer'];?><br>
<?php
}
?>
<?php if ($qid <= 8) {  ?>
<button type="button" onclick="history.back();">Tillbaka</button>
<button type="submit">Nästa</button>
<?php } else { ?>
<button id="submitAjax" type="submit">Avsluta provet</button>
     <?php } ?>  
</form>

<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
  <script type="text/javascript">
function goBack() {
    window.history.go(-1);
}
$(document).ready(function(){ 
$("#submitAjax").click(function(){
        if($('.radiobtn').is(':checked')) { 
            var radiobtn = $('.radiobtn:checked').val();
            var qid = $('#qid').val();            
             var answer = $('input[name=answer1]:radio').val();
            $.ajax(
            {
                type: "GET",
                url: 'test.php',
                dataType: "json",
                data: "radiobtn="+radiobtn+"&qid="+qid,
                success: function (response) {
                    if(response.status == true){
                        alert('points added');
                    }
                    else{
                        alert('points not added');   
                    }
                }
            });

            return false;
        }
    });
});
  </script>

    </body>

我想从 test.php 发送到我的数据库的值是:

qid(int), tid(int), 点(int)

有一个数据库连接,我的 test.php 文件的 sql 查询应该可以工作,但它没有发送表单信息。是否需要重写或修复某些内容才能使其正常工作?

最佳答案

首先,您在 AJAX 调用中的数据参数没有使用正确的语法。你缺少括号。它应该看起来像:

data: JSON.stringify({ radiobtn: radiobtn, qid: qid }),

其次,我建议使用 POST 而不是 GET:

type: "POST",

这意味着您需要在 test.php 上的 $_POST['radiobtn'] 和 $_POST['qid'] 中查找数据。注意:您应该使用 isset() 检查您期望的 key 在将值分配给变量之前,像这样:

$myBtn = isset($_POST['radiobtn']) ? $_POST['radiobtn'] : null;

第三,为了进行测试,在您的条件中使用 console.log() 检查被选中的复选框,以验证条件是否按预期工作。

if($('.radiobtn').is(':checked')) {
    console.log('here');

更新:

第四:您应该在 AJAX 调用中指定内容类型,如下所示:

contentType: "application/json; charset=utf-8",

关于javascript - 使用AJAX使用按钮将表单信息发送到另一个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34616001/

相关文章:

javascript - 通过文本在选定的 li 之后插入 li 元素

javascript - 如何获取类中的上一个/下一个元素

php - 如何使用 session 将所有数据存储在数据库中并检索它以在 PHP 中用作 ID

mysql - 为什么这个 PHP 循环每行渲染两次?

php - PHPDoc 中的闭包语法

jquery - 选项卡菜单在 IE7,8 中不起作用

javascript - 使用 javascript 的表单需要字段吗?

javascript - 带有获取实例的 console.log() 在异步函数中停止执行

javascript - 为什么在 Typescript 中导入文件时需要添加 .js 扩展名,而在 Angular 导入中则不需要?

javascript - 如何检查函数是否已经定义?