Mam stronę, w której użytkownik może dodać rekordy do bazy danych MySQL. Na tej samej stronie znajduje się istniejąca lista zapisów w bazie danych.

Używam AJAX, aby dodać rekord do bazy danych, przepraszam za starej wersji MySQL, zostanie zaktualizowany po pierwszym uruchomieniu tej rzeczy:

$(document).ready(function(){
//on the click of the submit button 
$("#btn_submit").click(function(){
 //get the form values
 var username = $('#hdn_username').val();     
 var name = $('#txt_name').val();     
 var brand = $('#txt_brand').val(); 

 //make the postdata
 var postData = 'username='+username+'&name='+name+'&brand='+brand;

 //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)

 $.ajax({
    url : "input.php",
    type: "POST",
    data : postData,
    success: function(data,status, xhr)
    {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#status_text").html(data);
        $('#name').val('');
        $('#brand').val('');
    },
    error: function (jqXHR, status, errorThrown)
    {
        //if fail show error and server status
        $("#status_text").html('there was an error ' + errorThrown + ' with status ' + textStatus);
    }
});
}); });

Mój html to:

<table class="simplet" width="640" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="300" colspan="2">Product Name</th>
<th width="150">Brand</th>
<th width="100">Quantity</th>
<th width="60">Price</th>
<th width="30">Delete</th>
</tr>
</thead>
<tbody>
<tr><td colspan="6"><div id="status_text_list" /></td></tr>

[insert_php]

$current_user= wp_get_current_user();
$username= $current_user->user_login;

mysql_connect("localhost","xxxxx","xxxx");//database connection
mysql_select_db("xxxx");

$query= "SELECT * FROM wp_userdata WHERE username='$username'";
$result= mysql_query($query);
if (!$result) { die("Error db request: <br />". mysql_error()); }

while ($result_row = mysql_fetch_array($result, MYSQL_ASSOC)){ echo '<tr class="odd-row"><td width="30"></td><td>'.$result_row['product_name'].'</td><td>'.$result_row['product_brand'].'</td><td>'.$result_row['product_quantity'].'</td><td>'.$result_row['product_link'].'</td><td><a class="link-delete" href="#" data-delete-id="' . $result_row['id'] . '">X</a></td></tr>';
}


[/insert_php]

</tbody></table>
<br />

<table border="1">
  <tr>
    <td align="center">Add Products</td>
  </tr>
  <tr>
    <td>
         <form onsubmit="return false">
      <table>
<input type="hidden" id="hdn_username" name="username" value="[insert_php]echo $username;[/insert_php]">
        <tr>
          <td>Product Name</td>
          <td><input type="text" id="txt_name" name="name" size="50">
          </td>
        </tr>
        <tr>
          <td>Brand</td>
          <td><input type="text"  id="txt_brand" name="brand" size="50">
          </td>
        </tr>
<tr>
                <td></td>
                <td><div id="status_text" /></td>
            </tr>
        <tr>
          <td></td>
          <td align="right"><input type="submit" id="btn_submit" name="submit" value="Submit"></td>
        </tr>
</form>
        </table>
      </td>
    </tr>
</table>

A moje wejście.php to:

mysql_connect("localhost","xxxx","xxxx");//database connection
mysql_select_db("xxxx");




//inserting data order
$order = "INSERT INTO wp_userdata
            (username, product_name, product_brand)
            VALUES
            ('$_POST[username]',
             '$_POST[name]',
            '$_POST[brand]')";

//declare in the order variable
$result = mysql_query($order);  //order executes
if($result){
    echo ("DATA SAVED SUCCESSFULLY");
} else{
    echo("<br>Input data is fail");
}

Po kliknięciu przycisku Wyślij, wyświetlane są wartości wysłane na wejście > http://suppliesPrices.com/?page_id=4 .

Chcę osiągnąć, aby dodać nowy wiersz danych na wyświetloną listę bez ponownego ładowania strony.

Myślałem, że uczynił go JavaScript i dodaj do sukcesu AJAX Call, ale nie jestem pewien, czy będzie działać.

Jak zmienić kod, aby uzyskać pożądany efekt?

0
Acidon 13 sierpień 2014, 01:12

2 odpowiedzi

Najlepsza odpowiedź

Aby dodać kolejny wiersz do tabeli, można użyć jQuery dołącza funkcja. Możesz to zrobić w funkcji sukcesu, tak jak:

success: function(data,status, xhr)
{
    //if success then just output the text to the status div then clear the form inputs to prepare for new data
    if (data.status == 'success') {
        $("#status_text").html('DATA SAVED SUCCESSFULLY');
        $('#name').val('');
        $('#brand').val('');

        $('.simplet tbody').append('<tr class="odd-row"><td width="30"></td><td>'+data.product.product_name+'</td><td>'+data.product.product_brand+'</td><td>'+data.product.product_quantity+'</td><td>'+data.product.product_link+'</td><td><a class="link-delete" href="#" data-delete-id="' + data.product.id + '">X</a></td></tr>');
    } else {
        $("#status_text").html(data.message);
    }
},

Będziesz chciał zaktualizować kod PHP, aby zwrócić więcej informacji. Najczęściej powszechnie powróciłbyś JSON zawierający informacje o tym, czy transakcja się powiodła, a kopia informacji, które zostały włożone do bazy danych (lub komunikatu o błędzie, jeśli nie powiodło się). Możesz zrobić coś takiego:

if($result){
    $id = mysql_insert_id();
    $retVal = array(
        'status' => 'success',
        'product' => array(
            'id' => $id,
            'product_name' => $_POST['name'],
            'product_brand' => $_POST['brand'],
            'product_quantity' => 0,
            'product_link' => '/?product_id=' . $id // not sure if this is the correct format or not 
        )
    );
} else {
    $retVal = array(
        'status' => 'error',
        'message' => 'Product could not be inserted'
    );
}

header('Content-Type: text/json');
echo json_encode($retVal);

Zdecydowanie powinieneś zaktualizować kod bazy danych, aby śledzić lepsze praktyki bezpieczeństwa, ale powinno się to zacząć.

1
Tyler Marien 14 sierpień 2014, 15:22

Dwie rzeczy, które możesz zrobić.

Opcja 1:

Po prostu użyj zwykłego przycisku type='button', zamiast przycisku przesyłania type='submit'. Przycisk przesyłania domyślnie zmienia stronę, gdy zwykły przycisk nie.

Opcja 2:

$("#btn_submit").click(function(event){
  event.preventDefault();
 //get the form values

Zobacz Docs for Event.PreventDefault. Domyślnym działaniem przycisku przesyłania jest przesyłanie przez przejście na stronę zdefiniowaną w atrybucie {X0}} (lub z powrotem na tę samą stronę, jeśli nie określono atrybutu action). To połączenie zapobiega tym domyślnym działaniu, dzięki czemu można użyć AJAX.

I na formularzu możesz pozbyć się onsubmit="return false", ponieważ nie będzie działać.

Edytować:

Błąd, który znalazłem w swoim ajax. Używasz składni z pocztą.

Nie używaj: var postData = 'username='+username+'&name='+name+'&brand='+brand;, a następnie data : postData, w AJAX z postem.

Raczej użyj w swojej data: { username: username, name: name, brand: brand }. Z postem = i & nie są używane.

Również w PHP: $_POST[username] jest nie tak. Powinien być $_POST['username'].

0
developerwjk 12 sierpień 2014, 23:38