MySQL/PHP: обновить MySQL с помощью Ajax

Question

Я начинаю, и я пытаюсь научиться добавлять, удалять, извлекать и обновлять базу данных с помощью PHP и Ajax.

В настоящее время я выполнил как восстановить и удалить, поэтому я пытаюсь обновить некоторые значения. Для получения данных я просто передаю выбранный идентификатор, который я хочу, поэтому я могу получить данные. То же самое касается удаления, я просто назначаю идентификатор, который я хочу удалить. Теперь, чтобы обновить, происходит больше вещей, где я не могу найти решение.

Это моя форма:

<form onsubmit="updateuser()"> 

    ID Number: <input name="ud_id"><br> 
    First Name: <input type="text" name="ud_first"><br> 
    Last Name: <input type="text" name="ud_last"><br> 

<input type="Submit" value="Update"> 
</form> 

и это мой JavaScript:

function updateuser() { 
    var str = $('.ud_id').attr('value'); 

    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     document.getElementById("txtuser").innerHTML = xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET", "ajaxupdate.php?q=" + str, true); 
    xmlhttp.send(); 
} 

Я думаю, что проблема возникает потому, что мой файл форма ajaxupdate.php не извлекает имя и фамилию значения из формы. Как будто я их не пропускаю (?).

Вот мой ajaxupdate.php файл:

<?php include("connection.php"); 

$id=$_GET['ud_id']; 
$first=$_GET['ud_first']; 
$last=$_GET['ud_last']; 


$query="UPDATE contacts SET first='$first', last='$last' WHERE id='$id'"; 


mysql_query($query); 
mysql_close(); 
?> 

Что я делаю неправильно, так что я могу обновить значение первой и последней из базы данных для конкретного ID?

Answer 1

Попробуйте этот код

<script type="text/javascript"> 
function updateuser() { 
    var ud_id = document.getElementById('ud_id').value; 
    var ud_first = document.getElementById('ud_first').value; 
    var ud_last = document.getElementById('ud_last').value; 

    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtuser").innerHTML = xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET", "ajaxupdate.php?ud_id=" + ud_id + "&ud_first="+ud_first+"&ud_last="+ud_last, true); 
    xmlhttp.send(); 
} 
</script> 

HTML

<form name="test"> 

    ID Number: <input name="ud_id"><br> 
    First Name: <input type="text" name="ud_first"><br> 
    Last Name: <input type="text" name="ud_last"><br> 

<input type="button" onClick="updateuser()" value="Update"> 
</form> 

Answer 2

Проверить это будет работать, как ожидалось

ud_id = document.getElementById('ud_id').value; 
    ud_first = document.getElementById('ud_first').value; 
    ud_last = document.getElementById('ud_last').value; 
    xmlhttp.open("GET", "ajaxupdate.php?ud_id=" + ud_id +"&ud_first=" +ud_first+ "ud_last="+ud_last, true); 



<form onsubmit="updateuser()"> 

    ID Number: <input name="ud_id" id="ud_id"><br> 
    First Name: <input type="text" name="ud_first" id="ud_first"><br> 
    Last Name: <input type="text" name="ud_last" id="ud_last"><br> 

<input type="Submit" value="Update"> 
</form> 

Answer 3

В вашем JavaScript, сделайте это

function updateuser() { 
    var ud_id = $('input[name="ud_id"]').val(); 
    var ud_first = $('input[name="ud_first"]').val(); 
    var ud_last = $('input[name="ud_last"]').val(); 

    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtuser").innerHTML = xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET", "ajaxupdate.php?ud_id=" + ud_id + "&ud_first="+ud_first+"&ud_last="+ud_last, true); 
    xmlhttp.send(); 
} 

Answer 4

Если вы хотите использовать updateuser() функцию на отправить, то он должен предотвратить форму от фактического представления. Сделайте его возвратом false, иначе форма будет отправлена ​​браузером, прежде чем функция успеет выполнить.

Браузер запускает функцию перед отправкой формы (как это делается при отправке). Если функция не возвращает false, она интерпретирует это как «все в порядке, вы можете смело представить форму». Форма затем отправляется как обычно.

В то же время функция инициирует асинхронный запрос. Но поскольку браузер уже отправил форму, теперь вы находитесь на совершенно другой странице, поэтому соединение и асинхронный запрос отсоединяются и, скорее всего, игнорируются (если, конечно, запрос не был сделан до изменения страницы, и в этом случае оба запроса обрабатываются).

В качестве альтернативы вы можете выполнить функцию, не помещая ее в событие отправки. См. sam_13's answer.

Answer 5

Я пришел по этому примеру, потому что я тоже сталкиваюсь с подобной проблемой. однако я не мог не заметить, что вы не указываете метод для своей формы, и ваш AJAX предполагает, что он должен использовать метод GET. просто пища для размышлений ...ура

Answer 6

Этот код проверен и работает. Мне нужно было сделать то же самое, обновить MySql с помощью ajax и объединить вышеизложенное с более широким исследованием, которое я получил, чтобы это работало. Файл PHP называется ajaxupdate.php:

<?php 
$id= $_GET['ud_id']; 
$first= $_GET['ud_first']; 
$last= $_GET['ud_last']; 
require_once ('mysqli_connect.php'); //connection to the database 
$sql = "UPDATE contacts SET FirstName ='$first', LastName='$last' WHERE id='$id'"; 
$result = mysqli_query($dbc,$sql); 
mysqli_close($dbc); 
?> 

Файл Html называется anyNameYouWish.html:

<html> 
<head> 
</SCRIPT> 
<script language="javascript" type="text/javascript"> 
//Browser Support Code 
function ajaxFunction(){ 
    var ajaxRequest; // The variable that makes Ajax possible! 
    try{ 
     // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 
function MsgBox (textstring) { 
alert (textstring) } 
    // Create a function that will receive data sent from the server 
    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4){ 
      var ajaxDisplay = document.getElementById('ajaxDiv'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var ud_id = document.getElementById('ud_id').value; 
    var ud_first = document.getElementById('ud_first').value; 
    var ud_last = document.getElementById('ud_last').value; 
    var queryString = "?ud_id=" + ud_id + "&ud_first="+ud_first+"&ud_last="+ud_last; 
    ajaxRequest.open("GET", "ajaxupdate.php" + queryString + "&random=" + Math.random(), true); 
    ajaxRequest.send(null); 
} 
</script> 
</head> 
<body> 
<form method="post" name="test" onsubmit="ajaxFunction()"> 
    ID Number: <input id="ud_id" name="ud_id"><br> 
    First Name: <input id="ud_first" type="text" name="ud_first"><br> 
    Last Name: <input id="ud_last" type="text" name="ud_last"><br> 
<input type="submit" value="Update"> 
</form> 
</body> 
</html>