如何使用ajax提交表单

时间:2015-01-30 17:26:46

标签: php jquery ajax

我想在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;
}
?>

2 个答案:

答案 0 :(得分: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标记。

答案 1 :(得分:0)

试试这个它应该帮助你。在提交表格时会在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;
}
?>