搜索
搜索

使用 Ajax 和 JQuery 调用 PHP 脚本

Tej Singh 发表于 Dev
22
泰杰·辛格

我目前正在尝试将表单数据发送到 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>
伍德罗

主要问题是您试图使用form.serialize()Ajax 请求中的数据。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" ，这不是必需的
  • 您的第一个 select 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Ajax调用PHP脚本

jQuery AJAX使用JSON Return调用PHP脚本

使用jQuery AJAX和PHP创建智能远程上传脚本

使用Jquery和Ajax从PHP调用特定函数

如何使用JQuery和Ajax调用PHP查询？

如何使用 AJAX 调用 php 脚本

使用FreePBX和Asterisk调用PHP脚本

如何使用 jquery 调用 php 脚本并终止 jquery 脚本？

使用 AJAX 和 POST 运行 php 脚本

使用AJAX jQuery和SOAP调用WebService

Javascript：来自 PHP 的 Ajax 调用（使用 jQuery）

与jQuery Ajax方法结合使用时，如何接收和处理来自Php脚本的响应

使用Ajax调用PHP脚本不起作用

通过使用AJAX调用从PHP运行Python脚本

使用jquery和ajax调用php文件加载数据到多个div

使用ajax调用脚本标签

jQuery从PHP脚本调用模态

使用JQuery和PHP进行Ajax上传

使用jquery和php登录Ajax

使用 jquery、ajax 和 php 登录

使用ajax调用php

使用AJAX jQuery从PHP脚本返回JSON数据

使用 Ajax post 调用的 php 脚本是否可以在脚本执行时发回 SSE 事件

jQuery $.when() 和 ajax 调用

如何使用jquery和deferreds改善Ajax调用？

结合使用typeahead.js和jquery ajax调用

如何使用 jquery 和 ajax 调用从 JsonObject 获取值？

结合使用jQuery UI的dialog（）函数和ajax调用

如何使用jquery和JSF进行javascript ajax调用？

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    IE 11中的FormData未定义

  3. 3

    计算数据帧R中的字符串频率

  4. 4

    如何在R中转置数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    Excel 2016图表将增长与4个参数进行比较

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  9. 9

    OpenCv：改变 putText() 的位置

  10. 10

    ActiveModelSerializer仅显示关联的ID

  11. 11

    算术中的c ++常量类型转换

  12. 12

    如何开始为Ubuntu开发

  13. 13

    将加号/减号添加到jQuery菜单

  14. 14

    去噪自动编码器和常规自动编码器有什么区别？

  15. 15

    获取并汇总所有关联的数据

  16. 16

    OpenGL纹理格式的颜色错误

  17. 17

    在 React Native Expo 中使用 react-redux 更改另一个键的值

  18. 18

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  19. 19

    TreeMap中的自定义排序

  20. 20

    Redux动作正常，但减速器无效

  21. 21

    如何对treeView的子节点进行排序

热门标签

归档