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，则在处理click事件时对事件对象调用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;
    }
  }
}

全部谢谢

AJAX表单提交到MYSQL而无需刷新

2 个答案: