dpw63348
2014-01-01 01:06
浏览 50

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

I have a php code that loops to create multiple separate forms with a submit button for each. I am trying to use JS to update the MYSQL with the form data without leaving the page

The Form (simplified)

<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>

The 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;
    }
  }
}

The PHP for updating MYSQL

$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."'");

The reaction on submitting should be the MYSQL updating in the background with no changes to what the user sees. However it is not updating the MYSQL at all.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongxun7962 2014-01-01 15:35
    已采纳

    Got it to work by changing the JS to

    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;
        }
      }
    }
    

    Thanks all

    已采纳该答案
    打赏 评论
  • dqw7121 2014-01-01 01:28

    The problem is that you're not doing anything to prevent the browser from submitting the form when you press the submit button. There are two ways to do this. Without using jQuery, you can use the onclick property (sort of like what your'e doing), but you have to return a value of false, otherwise the form will be submitted in addition to whatever the onclick handler is doing. So:

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

    Is not doing the trick. What you need is:

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

    You can also modify your function, picupdate to return false, and then just do this:

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

    Lastly, if you want to use jQuery instead, you call preventDefault() against the event object when you handle the click event:

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

    I hope this helps!

    打赏 评论

相关推荐 更多相似问题