使用Ajax和JQuery调用PHP脚本

时间：2018-07-27 19:15:22

标签： php jquery ajax

我当前正在尝试将表单数据发送到PHPMyAdmin MySQL服务器。没有Ajax，一切都可以在Web服务器上运行，但是问题是网页被重定向了。这是jquery脚本，它引用insert.php脚本。我不确定要输入什么数据，因为form.serialize（）会引发错误。

$.ajax({
        url: "insert.php",
        type: "post",
        data: form.serialize() ,
        success: function (response) {

        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }

我需要添加什么？我是Ajax的初学者。这是PHP脚本：

<?php
    $con = mysqli_connect('localhost','tejsingh_tej','password');
    if(!$con){
        echo 'Not Connected to Server';
    }

    if (!mysqli_select_db($con,'tejsingh_bhs2018')){
            echo 'Not Selected';
    }

    $Player = $_POST['player'];
    $Quarter = $_POST['quarter'];
    $Time = $_POST['time'];
    $Where = $_POST['where'];
    $Notes = $_POST['notes'];
    $What = $_POST['what'];

    $sql = "INSERT INTO game1 (player,quarter,time1,where1,notes,what) VALUES ('$Player', '$Quarter', '$Time', '$Where','$Notes','$What')";
    if(!mysqli_query($con,$sql)){
        echo'Not Inserted';
    }
    else{
        echo 'Inserted';
    }

    header('refresh:2; url=index.html');


?>

让我知道是否需要更多信息。谢谢！

编辑：其余代码

<!DOCTYPE html>
<html>
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>

</head>
<body>

  <img id = 'pool' src="wapo.png" height="322" width="592">
  <form name="game" action="insert.php" method="post" target="_blank">
  <p> <select id="er" name = 'player'>
    <option value="dy">r</option>
    <option value="d">n</option>
    <option value="ex">on</option>
    <option value="per">per</option>
    <option value="tt">t r</option>
    <option value="jon">He</option>
    <option value="jk">Jk</option>

  </select>
  <select id="what" name = 'what'>
    <option value="shoton">Shot on Cage</option>
    <option value="shotoff">Shot off Cage</option>
    <option value="goal">Goal</option>
    <option value="countergoal">Goal on Counter</option>
    <option value="countershot">Shot on Counter</option>
    <option value="assist">Assist</option>
    <option value="block">Block</option>
    <option value="steal">Steal</option>
    <option value="turnover">Turnover</option>
    <option value="drawn">Ejection Drawn</option>
    <option value="ejected">Ejected</option>
  </select>
  <select id="where" name = 'where'>
    <option value="set">Set</option>
    <option value="navy">Navy</option>
    <option value="leftwing">1/2 side past 5</option>
    <option value="rightwing">4/5 side past 5</option>
    <option value="point">Point/3</option>
    <option value="lefttwo">1/2 side 2 meter</option>
    <option value="righttwo">4/5 side 2 meter</option>
    <option value="1">6 on 5 1</option>
    <option value="2">6 on 5 2</option>
    <option value="3">6 on 5 3</option>
    <option value="4">6 on 5 4</option>
    <option value="5">6 on 5 5</option>
    <option value="6">6 on 5 6</option>
  </select>
  <select id="quarter" name = 'quarter'>
    <option value="q1">Quarter 1</option>
    <option value="q2">Quarter 2</option>
    <option value="q3">Quarter 3</option>
    <option value="q4">Quarter 4</option>
  </select>
    <select id="time" name = 'time'>
    <option value="0:30">0:30</option>
    <option value="1:00">1:00</option>
    <option value="1:30">1:30</option>
    <option value="2:00">2:00</option>
    <option value="2:30">2:30</option>
    <option value="3:00">3:00</option>
    <option value="3:30">3:30</option>
    <option value="4:00">4:00</option>
    <option value="4:30">4:30</option>
    <option value="5:00">5:00</option>
    <option value="5:30">5:30</option>
    <option value="6:00">6:00</option>
    <option value="6:30">6:30</option>
    <option value="7:00">7:00</option>
  </select>

  Notes: <input type="text" id = 'notes' name = 'notes'>

 <button type="button" onclick="save()" name = 'form'> Save </button> 
<!---<input type="submit" name="submit">-->
</p>
</form>
  <p> Log </p>
  <table id='log'>
  <tr>

    <th>Player</th>
    <th>Action</th>
    <th>Location</th>
    <th>Quarter</th>
    <th>Time</th>
    <th>Notes</th>

  </tr>
</table>

<script>

function save() {

  var a = document.getElementById("player");
  value = a.options[a.selectedIndex].value;
  console.log(value);
  var b = document.getElementById("what");
  value1 = b.options[b.selectedIndex].value;
  console.log(value1);
  var c = document.getElementById("where");
  value2 = c.options[c.selectedIndex].value;
  console.log(value2);
  var d = document.getElementById("quarter");
  value3 = d.options[d.selectedIndex].value;
  console.log(value3)
  var e = document.getElementById("time");
  value4 =e.options[e.selectedIndex].value;
  console.log(value4)
  var f = document.getElementById("notes");
  value5 = f.value;
  console.log(value5)
  var table = document.getElementById("log");
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);

  cell1.innerHTML = value;
  cell2.innerHTML = value1;
  cell3.innerHTML = value2;
  cell4.innerHTML = value3;
  cell5.innerHTML = value4;
  cell6.innerHTML = value5;


  $.ajax({
        url: "insert.php",
        type: "post",
        data: form.serialize() ,
        success: function (response) {
           // you will get response from your php page (what you echo or print)                 

        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }


    });

  if(value2 == 'leftwing'){
      document.getElementById('pool').src='onetwofive.png'
  } else if (value2 == 'set'){
      document.getElementById('pool').src='set.png'
  } else if (value2 == 'point'){
      document.getElementById('pool').src='point.png'
  } else if (value2 == 'rightwing'){
      document.getElementById('pool').src='fourfivefive.png'
  } else if (value2 == 'lefttwo'){
      document.getElementById('pool').src='onetwotwo.png'
  } else if (value2 == 'righttwo'){
      document.getElementById('pool').src='fourfivetwo.png'
  } else {
      document.getElementById('pool').src='wapo.png'
  }

}
</script>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

主要问题是您试图对Ajax请求中的数据使用form.serialize()。 form并不指向任何内容，而是undefined。您需要使用标识符（id）将表单声明指向/分配给DOM元素。因此，将id="game"添加到打开的form标记中。然后，您可以使用Jquery执行以下操作。

jQuery：

var form = $('#game');

那么您可以做：

form.serializeArray()用于Ajax请求的数据部分，以确保将数据作为$ _POST变量进行发送。

如果您使用的是jQuery并希望在同一页面上执行Ajax请求，请尝试下面的代码段，其中包含以下代码，这些代码可让您单击submit按钮，而无需重新路由到页面进行处理。如果需要，您仍然可以使用submit按钮，而不仅仅是button。

$(document).ready(function() {

  $('form').on('submit', function(e) {
    e.preventDefault();
    save();
  });

});

查看您的代码后发现的其他一些问题/提示：

  • 从开头的form标签中删除target =“ _ blank”，这不是必需的
  • 您的第一个选择ID不正确，将导致JS运行时错误。 id必须为player，以便您的JS代码可以正确引用它。
  • 您正在HTML标记中交替使用'和"。请坚持使用其中一个。在HTML中，单引号（'）和双引号（"）的使用可以互换，没有区别。但是建议保持一致性，因此我们必须选择一种语法约定并定期使用它。

function save() {

  var a = document.getElementById("player");
  value = a.options[a.selectedIndex].value;
  console.log(value);
  var b = document.getElementById("what");
  value1 = b.options[b.selectedIndex].value;
  console.log(value1);
  var c = document.getElementById("where");
  value2 = c.options[c.selectedIndex].value;
  console.log(value2);
  var d = document.getElementById("quarter");
  value3 = d.options[d.selectedIndex].value;
  console.log(value3)
  var e = document.getElementById("time");
  value4 = e.options[e.selectedIndex].value;
  console.log(value4)
  var f = document.getElementById("notes");
  value5 = f.value;
  console.log(value5)
  var table = document.getElementById("log");
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);

  cell1.innerHTML = value;
  cell2.innerHTML = value1;
  cell3.innerHTML = value2;
  cell4.innerHTML = value3;
  cell5.innerHTML = value4;
  cell6.innerHTML = value5;

  $.ajax({
    url: 'insert.php',
    type: 'POST',
    data: $('#game').serializeArray(),
    success: function(response) {

    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    }
  });

  if (value2 == 'leftwing') {
    document.getElementById('pool').src = 'onetwofive.png'
  } else if (value2 == 'set') {
    document.getElementById('pool').src = 'set.png'
  } else if (value2 == 'point') {
    document.getElementById('pool').src = 'point.png'
  } else if (value2 == 'rightwing') {
    document.getElementById('pool').src = 'fourfivefive.png'
  } else if (value2 == 'lefttwo') {
    document.getElementById('pool').src = 'onetwotwo.png'
  } else if (value2 == 'righttwo') {
    document.getElementById('pool').src = 'fourfivetwo.png'
  } else {
    document.getElementById('pool').src = 'wapo.png'
  }

}

$(document).ready(function() {

  $('form').on('submit', function(e) {
    e.preventDefault();
    save();
  });

});
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
  <img id="pool" src="wapo.png" height="322" width="592">
  <form name="game" id="game">
    <p>
      <select id="player" name="player">
        <option value="dy">r</option>
        <option value="d">n</option>
        <option value="ex">on</option>
        <option value="per">per</option>
        <option value="tt">t r</option>
        <option value="jon">He</option>
        <option value="jk">Jk</option>
      </select>
      <select id="what" name="what">
        <option value="shoton">Shot on Cage</option>
        <option value="shotoff">Shot off Cage</option>
        <option value="goal">Goal</option>
        <option value="countergoal">Goal on Counter</option>
        <option value="countershot">Shot on Counter</option>
        <option value="assist">Assist</option>
        <option value="block">Block</option>
        <option value="steal">Steal</option>
        <option value="turnover">Turnover</option>
        <option value="drawn">Ejection Drawn</option>
        <option value="ejected">Ejected</option>
      </select>
      <select id="where" name="where">
        <option value="set">Set</option>
        <option value="navy">Navy</option>
        <option value="leftwing">1/2 side past 5</option>
        <option value="rightwing">4/5 side past 5</option>
        <option value="point">Point/3</option>
        <option value="lefttwo">1/2 side 2 meter</option>
        <option value="righttwo">4/5 side 2 meter</option>
        <option value="1">6 on 5 1</option>
        <option value="2">6 on 5 2</option>
        <option value="3">6 on 5 3</option>
        <option value="4">6 on 5 4</option>
        <option value="5">6 on 5 5</option>
        <option value="6">6 on 5 6</option>
      </select>
      <select id="quarter" name="quarter">
        <option value="q1">Quarter 1</option>
        <option value="q2">Quarter 2</option>
        <option value="q3">Quarter 3</option>
        <option value="q4">Quarter 4</option>
      </select>
      <select id="time" name="time">
        <option value="0:30">0:30</option>
        <option value="1:00">1:00</option>
        <option value="1:30">1:30</option>
        <option value="2:00">2:00</option>
        <option value="2:30">2:30</option>
        <option value="3:00">3:00</option>
        <option value="3:30">3:30</option>
        <option value="4:00">4:00</option>
        <option value="4:30">4:30</option>
        <option value="5:00">5:00</option>
        <option value="5:30">5:30</option>
        <option value="6:00">6:00</option>
        <option value="6:30">6:30</option>
        <option value="7:00">7:00</option>
      </select>
      Notes: <input type="text" id="notes" name="notes" />
      <input type="submit" name="save" value="Save" />
    </p>
  </form>
  <p> Log </p>
  <table id="log">
    <tr>
      <th>Player</th>
      <th>Action</th>
      <th>Location</th>
      <th>Quarter</th>
      <th>Time</th>
      <th>Notes</th>
    </tr>
  </table>
</body>

</html>

相关问题
最新问题