AJAX 表单提交到 MYSQL 无需刷新

Question

我有一个 php 代码循环创建多个单独的表单，每个表单都有一个提交按钮。我正在尝试使用 JS 在不离开页面的情况下使用表单数据更新 MYSQL

表格（简体）

<form name='myform'>
<SELECT class='index' NAME='album' id='album'>
    <option value='1'>"PUBLIC"</option>
    <option value='2'>"PRIVATE"</option>
    <option value='3'>"FRIENDS"</option>
</select>
<input type="text" name="title" size="40" maxlength="256" value="">
<textarea name="caption" cols="37" rows="3"></textarea>
Photo Rating:&nbsp;
<input type="radio" name="rate" value="1">ON&nbsp;
<input type="radio" name="rate" value="0" checked>OFF&nbsp;&nbsp;
<input type="checkbox" name="del" value="1"> Delete Photo&nbsp;
<?php
<input type='submit' name='submit' value='Save changes to this photo' onClick=\"picupdate('include/picupdate.php', '1', 'picpg');\">";
?>
</tr></table></form>

JS

function picupdate(php_file, pid, where) {
  var request =  get_XmlHttp();     // call the function for the XMLHttpRequest instance
  var a = document.myform.album.value;
  var b = document.myform.title.value;
  var c = document.myform.caption.value;
  var d = document.myform.rate.value;
  var e = document.myform.del.value;
  var  the_data = 'pid='+pid+'&album='+a+'&title='+b+'&caption='+c+'&rate='+d+'&del='+e;

  request.open("POST", php_file, true);         // set the request

  // adds  a header to tell the PHP script to recognize the data as is sent via POST
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(the_data);       // calls the send() method with datas as parameter

  // Check request status
  // If the response is received completely, will be transferred to the HTML tag with tagID
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      document.getElementById(where).innerHTML = request.responseText;
    }
  }
}

用于更新MYSQL的PHP​​

$pid=$_POST['pid'];
$album=$_POST['album'];
$title=$_POST['title'];
$caption=$_POST['caption'];
$rate=$_POST['rate'];
$del=$_POST['del'];
$db->query("UPDATE photos SET album = '".$album."', title = '".$title."', caption = '".$caption."', rate = '".$rate."' WHERE pid = '".$pid."'");

提交的反应应该是后台的MYSQL更新，用户看到的内容没有变化。但是它根本没有更新 MYSQL。

Answer 1

问题在于，当您按下提交按钮时，您没有采取任何措施来阻止浏览器提交表单。有两种方法可以做到这一点。不使用 jQuery，你可以使用 onclick 属性（有点像你在做什么），但你必须返回一个值 false，否则表单将被提交另外无论onclick 处理程序正在做什么。所以：

<input type='submit' name='submit' 
    onclick=\"picupdate('include/picupdate.php', '1', 'picpg');\">

没有做到这一点。你需要的是：

<input type='submit' name='submit' 
    onclick=\"picupdate('include/picupdate.php', '1', 'picpg'); return false;\">

你也可以修改你的函数 picupdate 来返回 false，然后这样做：

<input type='submit' 
    onclick=\"return picupdate('include/picupdate.php', '1', 'picpg');\">

最后，如果你想改用 jQuery，你可以在处理点击事件时针对事件对象调用preventDefault()：

$(document).ready(function(){
    $('input[name="submit"]').on('click', function(evt){
        e.preventDefault();     // prevent form submission
        picupdate('include/picupdate.php', '1', 'picpg');
    });

我希望这会有所帮助！

Answer 2

通过将 JS 更改为使其工作

function picupdate(php_file, pid, where) {
  var request =  get_XmlHttp();     // call the function for the XMLHttpRequest instance
  var a = document.getElementById('album').value;
  var b = document.getElementById('title').value;
  var c = document.getElementById('caption').value;
  var d = document.getElementById('rate').value;
  var e = document.getElementById('del').checked;
  var  the_data = 'pid='+pid+'&album='+a+'&title='+b+'&caption='+c+'&rate='+d+'&del='+e;

  request.open("POST", php_file, true);         // set the request

  // adds  a header to tell the PHP script to recognize the data as is sent via POST
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(the_data);       // calls the send() method with datas as parameter

  // Check request status
  // If the response is received completely, will be transferred to the HTML tag with tagID
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      document.getElementById(where).innerHTML = request.responseText;
    }
  }
}

谢谢大家