Сделать страницу обновления Ajax и PHP без обновления страницы?

Question

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

Как это сделать сразу же на странице без обновления страницы? Я думаю, что это может иметь какое-то отношение к моему PHP или SQL?

JavaScript:

$(document).ready(function() { 
    $(".addBill").on("click", function() { 
     var billAmount = $('.billAmount').val(); 
     var billName = $('.billName').val(); 
     $.ajax({ 
      type: "POST", 
      url: "index.php", 
      data: { 
       bill_amount: billAmount, 
       bill_name: billName, 
       action: 'addBill' 
      } 
     }); 
     return false; 
    }); 

    $(".removeBill").on("click", function() { 
     var id = $(this).data('id'); 
     $.ajax({ 
      type: "POST", 
      url: "index.php", 
      data: { 
       id_to_delete: id, 
       action: 'removeBill' 
      } 
     }); 
     return false; 
    }); 
}); 

HTML:

<form method="post" name="addBillForm"> 
    <input type="text" placeholder="Enter bill name" name="billName" class="billName"> 
    <input type="text" placeholder="Enter bill amount" name="billAmount" class="billAmount"> 
    <input type="submit" value="Submit" name="addBillForm" class="addBill"> 
</form> 

<br><br> 
<h2>My Bills</h2> 
{% for bill in bills %} 
    <p>{{ bill.billName }} - {{ bill.billAmount }} - 
     <a href="#" class="removeBill" data-id="{{ bill.id }}">Remove</a> 
    </p> 
{% endfor %} 

Вот мой PHP-файл:

<?php 

require_once 'global.php'; 

if (@$_POST['action'] == 'addBill') 
{ 
    $billName = $_POST['bill_name']; 
    $billAmount = intval($_POST['bill_amount']); 
    $stmt = $db->prepare("INSERT INTO bills (billName, billAmount) VALUES(?,?)"); 
    $stmt->bindParam(1, $billName); 
    $stmt->bindParam(2, $billAmount); 
    $stmt->execute(); 
} 

if (@$_POST['action'] == 'removeBill') 
{ 
    $id = intval($_POST['id_to_delete']); 
    $stmt = $db->prepare("DELETE FROM bills WHERE id = ?"); 
    $stmt->bindValue(1, $id); 
    $stmt->execute(); 
} 

$billResults = $db->query('SELECT * FROM bills'); 
$bills = $billResults->fetchAll(PDO::FETCH_ASSOC); 

$twigContext = array(
    "bills" => $bills 
); 

echo $twig->render('base.html.twig', $twigContext); 

Answer 1

Вы Арент говорю это, чтобы сделать что-нибудь после того, как Аякса возвращается. Замените свой вызов .ajax этим.

$.post("index.php", { action: "add bill", time: "2pm" }) 
 
    .done(function(data) { 
 
    alert("Data Loaded: " + data); 
 
    });

Затем вы можете заменить предупреждение с w.e вы пытаетесь сделать.

Answer 2

Вы не на самом деле ничего не делаете на странице после завершения вызова AJAX. Например:

$.ajax({ 
    type: "POST", 
    url: "index.php", 
    data: { 
     bill_amount: billAmount, 
     bill_name: billName, 
     action: 'addBill' 
    }, 
    success: function (data) { 
     // update the page somehow 
    }, 
    error: function() { 
     // there was an error, handle it here 
    } 
}); 

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

Answer 3

Как бы то ни было, у вас нет ничего, когда запрос Ajax будет успешным (состояние == 200).

Во-первых, вы должны смотреть в this документации для получения представления о том, как работает ajax метод JQuery, также см ниже ссылки на то же самое:

http://www.sitepoint.com/use-jquerys-ajax-function/

http://www.w3schools.com/jquery/ajax_ajax.asp

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