如何使用Ajax提交表單

Question

我想在poll.php頁面上顯示polldemo1.php的輸出。 但這沒有發生。 它再次顯示poll.php頁面的形式作為輸出。 請更正它。如果有人可以用ajax向我解釋php，那將非常好

poll.php

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
<h3>SIG Polls</h3>
<form method="POST" id="myform" class="myform"  >
C/C++
<input type="checkbox" name="vote[]" value="0"  />
<br />
Java
<input type="checkbox" name="vote[]" value="1" />
<br />
Matlab
<input type="checkbox" name="vote[]" value="2" />
<br />
C#/.NET
<input type="checkbox" name="vote[]" value="3" />
<br />
PHOTOSHOP
<input type="checkbox" name="vote[]" value="4" />
<br />
CCNA
<input type="checkbox" name="vote[]" value="5" />
<br />
BASIC ELECTRONICS
<input type="checkbox" name="vote[]" value="6" />
<br />
<input type="submit" name="submit" value="vote" onclick="return submitForm()" />
</form>
<div id="myResponse"></div>
<script type="text/javascript">
function submitForm() {
var form = document.myform;

var dataString = $(form).serialize();


$.ajax({
    type:'POST',
    url:'polldemo1.php',
    data: dataString,
    success: function(data){
        $('#myResponse').text(data);
     }
});
return false;
}
</script>
</body>
</html>


polldemo1.php

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<?php
echo "hello";
//error_reporting(0);
if(isset($_POST['submit']))
{
 /*if (isset($_COOKIE["ieeepoll"]))
 {
  echo "<script>alert('You have already voted'); location.href='poll.php';</script>";
 } */
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$c        = $array[0];
$java     = $array[1];
$matlab   = $array[2];
$net      = $array[3];
$ph       = $array[4];
$ccna     = $array[5];
$be       = $array[6];
foreach($_POST["vote"] as $vote)
{
if ($vote == 0)
  {
  $c = $c + 1;
  }
if ($vote == 1)
  {
  $java = $java + 1;
  }
  if ($vote == 2)
  {
  $matlab = $matlab + 1;
  }

if ($vote == 3)
  {
  $net = $net + 1;
  }

if ($vote == 4)
  {
  $ph = $ph + 1;
  }

if ($vote == 5)
  {
  $ccna = $ccna + 1;
  }

if ($vote == 6)
  {
  $be = $be + 1;
  }

}
//insert votes to txt file
$insert = $c."||".$java."||".$matlab."||".$net."||".$ph."||".$ccna."||".$be;
file_put_contents($filename,$insert);
echo $be;
}
?>

Answer 1

在HTML表單屬性中添加onsubmit事件，如下所示

<form method="POST" id="myform" class="myform" onsubmit="return false" >

您也可以通過jQuery管理上述內容，只需要像這樣修改您的JavaScript代碼即可。

$("#myform").on('submit', function (event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'polldemo1.php',
        data: $("#myform").serialize(),
        success: function (data, status) {
            //do whatever you want to do
        },
        error: function (err) {
            //do wahtever you want to do
        }
    });
});
//OR
$("#myform").on('submit', function (event) {
    event.preventDefault();
    submitForm();
});

另外，您無需在php腳本中保留任何html屬性。 從該腳本中刪除所有html標記。

Answer 2

嘗試此操作將對您有所幫助。在提交表單時，它將在poll.php上顯示文件的內容。

poll.php

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
<h3>SIG Polls</h3>
<form method="POST" id="myform" class="myform"  >
C/C++
<input type="checkbox" name="vote[]" value="0"  />
<br />
Java
<input type="checkbox" name="vote[]" value="1" />
<br />
Matlab
<input type="checkbox" name="vote[]" value="2" />
<br />
C#/.NET
<input type="checkbox" name="vote[]" value="3" />
<br />
PHOTOSHOP
<input type="checkbox" name="vote[]" value="4" />
<br />
CCNA
<input type="checkbox" name="vote[]" value="5" />
<br />
BASIC ELECTRONICS
<input type="checkbox" name="vote[]" value="6" />
<br />
<input type="submit" name="submit" value="vote" onclick="return submitForm()" />
</form>
<div id="myResponse"></div>
<script type="text/javascript">
function submitForm() {
var dataString = $("#myform").serialize();


$.ajax({
    type:'POST',
    url:'index.php',
    data: dataString,
    success: function(data){
        $('#myResponse').text(data);
     }
});
return false;
}
</script>
</body>

    </html>

polldemo1.php

<?php
echo "hello";
//error_reporting(0);
if(isset($_POST))// do not check for submit here it won't go with post
{
 /*if (isset($_COOKIE["ieeepoll"]))
 {
  echo "<script>alert('You have already voted'); location.href='poll.php';</script>";
 } */
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$c        = $array[0];
$java     = $array[1];
$matlab   = $array[2];
$net      = $array[3];
$ph       = $array[4];
$ccna     = $array[5];
$be       = $array[6];
foreach($_POST["vote"] as $vote)
{
if ($vote == 0)
  {
  $c = $c + 1;
  }
if ($vote == 1)
  {
  $java = $java + 1;
  }
  if ($vote == 2)
  {
  $matlab = $matlab + 1;
  }

if ($vote == 3)
  {
  $net = $net + 1;
  }

if ($vote == 4)
  {
  $ph = $ph + 1;
  }

if ($vote == 5)
  {
  $ccna = $ccna + 1;
  }

if ($vote == 6)
  {
  $be = $be + 1;
  }

}
//insert votes to txt file
$insert = $c."||".$java."||".$matlab."||".$net."||".$ph."||".$ccna."||".$be;
file_put_contents($filename,$insert);
echo $insert;
}
?>

如何使用Ajax提交表單

問題描述

2 個解決方案

解決方案1
1 2015-01-30 18:30:51

解決方案2
0 2015-01-30 18:18:26

如何使用Ajax提交表單

問題描述

2 個解決方案

解決方案1 1 2015-01-30 18:30:51

解決方案2 0 2015-01-30 18:18:26

解決方案1
1 2015-01-30 18:30:51

解決方案2
0 2015-01-30 18:18:26