Question

如何使用POST方法通过Ajax将表格（A＆amp; B）的2个值发送到check.php

在下面的源代码中，我能够向check.php发送2个输入值，并在变量$ A和$ B中放入2个值。并返回答案。但我不希望页面刷新。为此，我想从AJAX获得帮助。有人可以给我写AJAX代码吗？（将两者发送到check.php并以AJAX形式接收响应）

<!DOCTYPE html>
<html>
<head>
    <title>POLL</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
<?php
  if (isset($_GET["cancell"])){
      echo '<div id="cancell">کاربر عزیز شما قبلا در این نظرسنجی شرکت کرده اید</div>';
  }
  if (isset($_GET["insert"])){
      echo '<div id="insert">نظر شما با موفقیت درج شد</div>';
}
if (isset($_GET["error"])){
    echo '<div id="insert">خطا در درج نظر</div>';

}

?>
<br /><br />
<div class="container" style="width:600px;">
    <h2 align="center">Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</h2>
    <br /><br />
    <form id="Poll" method="post"  action="check.php" >
        <div class="form-group" >
            <label>Select which Framework you have knowledge</label>
            <select id="framework1" name="framework1"  >
                <option value="11">AA</option>
                <option value="12">AAA</option>
                <option value="13">AAAA</option>
                <option value="14">AAAAA</option>
                <option value="15">AAAAAA</option>
                <option value="16">AAAAAAA</option>
                <option value="17">AAAAAAAA</option>
                <option value="18">AAAAAAAAA</option>
            </select>
        </div>
        <div class="form-group" >
            <label>Select which Framework you have knowledge</label>
            <select id="framework2" name="framework2"  >
                <option value="11">AA</option>
                <option value="12">AAA</option>
                <option value="13">AAAA</option>
                <option value="14">AAAAA</option>
                <option value="15">AAAAAA</option>
                <option value="16">AAAAAAA</option>
                <option value="17">AAAAAAAA</option>
                <option value="18">AAAAAAAAA</option>
            </select>
        </div>
        <div class="form-group">

            <input type="submit" class="btn btn-info" name="submit" value="submit" id="submit" />

        </div>
    </form>
    <br />
</div>
<div id="all">
    <?php
    include "connection.php";
    $A=0;
    $AA=0;
    $AAA=0;
    $AAAA=0;
    $AAAAA=0;
    $AAAAAA=0;
    $AAAAAAA=0;
    $AAAAAAAA=0;
    $i=0;
    $sql="select * from Poll";
    $result=$connect->query($sql);
    foreach ($result as $rows)
    {
        $i=$i+1;
    if ($rows["answer"]=="11"){
        $A++;
    }
    if ($rows["answer"]=="12"){
        $AA++;
    }
    if ($rows["answer"]=="13"){
        $AAA++;
    }
    if ($rows["answer"]=="14"){
        $AAAA++;
    }
    if ($rows["answer"]=="15"){
        $AAAAA++;
    }
    if ($rows["answer"]=="16"){
        $AAAAAA++;
    }
    if ($rows["answer"]=="17"){
        $AAAAAAA++;
    }
    if ($rows["answer"]=="18"){
        $AAAAAAAA++;
    }
    }
    echo 'A'.(($A/$i)*100).'% <div id="A">'.$A.'</div>';
    echo 'AA'.(($AA/$i)*100).'% <div id="AA">'.$AA.'</div>';
    echo 'AAA'.(($AAA/$i)*100).'% <div id="AAA">'.$AAA.'</div>';
    echo 'AAAA'.(($AAAA/$i)*100).'% <div id="AAAA">'.$AAAA.'</div>';
    echo 'AAAAA'.(($AAAAA/$i)*100).'% <div id="AAAAA">'.$AAAAA.'</div>';
    echo 'AAAAAA'.(($AAAAAA/$i)*100).'% <div id="AAAAAA">'.$AAAAAA.'</div>';
    echo 'AAAAAAA'.(($AAAAAAA/$i)*100).'% <div id="AAAAAAA">'.$AAAAAAA.'</div>';
    echo 'AAAAAAAA'.(($AAAAAAAA/$i)*100).'% <div id="AAAAAAAA">'.$AAAAAAAA.'</div>';
    ?>
</div>
</body>
</html>

<script>
    $(document).ready(function(){
        $('#framework1').multiselect({
            nonSelectedText: 'Select Framework',
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            buttonWidth:'400px'
        });
        $('#framework2').multiselect({
            nonSelectedText: 'Select Framework',
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            buttonWidth:'400px'
        });

        var A=$("#A").html();
        var AA=$("#AA").html();
        var AAA=$("#AAA").html();
        var AAAA=$("#AAAA").html();
        var AAAAA=$("#AAAAA").html();
        var AAAAAA=$("#AAAAAA").html();
        var AAAAAAA=$("#AAAAAAA").html();
        var AAAAAAAA=$("#AAAAAAAA").html();
        $("#A").css({"width":A*10,"height":"20px","background":"red"});
        $("#AA").css({"width":AA*10,"height":"20px","background":"red"});
        $("#AAA").css({"width":AAA*10,"height":"20px","background":"red"});
        $("#AAAA").css({"width":AAAA*10,"height":"20px","background":"red"});
        $("#AAAAA").css({"width":AAAAA*10,"height":"20px","background":"red"});
        $("#AAAAAA").css({"width":AAAAAA*10,"height":"20px","background":"red"});
        $("#AAAAAAA").css({"width":AAAAAAA*10,"height":"20px","background":"red"});
        $("#AAAAAAAA").css({"width":AAAAAAAA*10,"height":"20px","background":"red"});
    });
</script>

check.php：

<?php
include "connection.php";
$i=0;
$sql="select * from Poll";
$result=$connect->query($sql);
$A=$_POST["framework1"];
$B=$_POST["framework2"];

foreach($result as $rows)
{
    if($rows["ip"]==$_SERVER["REMOTE_ADDR"])
        $i=$i+1;
}
if($i>=1)
{
    header("location:index.php?cancell=1010");
    exit;
}
else
{
    $sql2="INSERT INTO `whoftwho_Poll`.`Poll` (`id` ,`answer` ,`ip`)VALUES (NULL , ?, ?);";
    $result2=$connect->prepare($sql2);
    $result2->bindValue(1,$_POST["framework1"]);
    $result2->bindValue(2,$_SERVER["REMOTE_ADDR"]);
    if($result2->execute())
    {
        header("location:index.php?insert=1010");
        exit;
    }
    else
    {
        header("location:index.php?error=1010");
        exit;
    }
}
?>

home page

Answer 1

$.ajax({
  method: "POST",
  url: "check.php",
  data: $('#Poll').serialize
})
  .done(function( msg ) {
if (msg.status=='success'){
alert('member check pass');
}else{
alert('member check failed');
}
  });

checker.php

 if($result2->execute())
    {
$msg[status]='success';
       echo json_encode($msg);
        exit;
    }
    else
    {
$msg[status]='error';
 echo json_encode($msg);
        exit;
    }

您可以使用Ajax执行此操作，并稍微修改checker.php以匹配回调操作的ajax请求。

如何使用POST方法通过Ajax发送2个表单值

1 个答案: