У меня есть простой сценарий ajax (jquery version) и очень короткая функция php, и они отлично работают без проблем. Когда я отправлю значение из ввода формы, ajax будет работать для отправки и получения результата из сценария php, в этом случае для получения общей суммы заказа книги. Сценарий Ajax и html следующие:
<script language="JavaScript"> $(document).ready(function() { $("form").mouseout( function() { // get field value var qtyVal = $('#qty').val(); // use HTTP GET get ajax $.ajax({ type: 'GET', url: 'getSunBody.php', data: { qty : qtyVal, }, success: function(data) { //get xml value $('#result').html($(data).find('qty').text()); $('#result1').html($(data).find('caution').text()); } }); return false; }); }); </script> <body> Total price:<div id="result" class="box" style="height=350px;"></div><div id="result1" class="box" style="height=350px;"></div> <form> <p> <label>quantity: </label> <input type="text" id="qty" name="qty"/> <br/> <input type="submit" value="submit"> total price:</p> <p> </p> </form> И следующий php-скрипт, служащий как xml, также отлично работает с вышеописанным запросом ajax:
<?php // XML document header("Content-Type: text/xml"); header("Content-Type:text/html; charset=utf-8"); // get field values $qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"]; echo "<?xml version=\"1.0\" ?>"; echo "<datetime>"; echo "<qty>" . $qty*100 . "</qty>"; $total=$qty*100; if ($total==0) echo "<caution>"."please input number!"."</caution>"; else if ($total<=500) echo "<caution>"."you shoud buy more!"."</caution>"; echo ""; echo "</datetime>"; ?>-<?php // XML document header("Content-Type: text/xml"); header("Content-Type:text/html; charset=utf-8"); // get field values $qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"]; echo "<?xml version=\"1.0\" ?>"; echo "<datetime>"; echo "<qty>" . $qty*100 . "</qty>"; $total=$qty*100; if ($total==0) echo "<caution>"."please input number!"."</caution>"; else if ($total<=500) echo "<caution>"."you shoud buy more!"."</caution>"; echo ""; echo "</datetime>"; ?>
Однако, когда я совмещаю вышеуказанные скрипты с петлями foreach корзины покупок, это не работает, и сценарий ajax не смог получить переменные из области ввода формы. Я не знаю, является ли это проблемой с переменной областью (глобальными или локальными)? или что-нибудь еще?
Ниже приведен общий сценарий, который я хотел бы установить с помощью:
<script language="JavaScript"> $(document).ready(function() { $("form").mouseout( function() { // get value from the form var qtyVal = $('#qty').val(); // get $.ajax({ type: 'GET', url: 'getSunBody.php', data: { qty : qtyVal, }, success: function(data) { // get XML value $('#result').html($(data).find('qty').text()); $('#result1').html($(data).find('caution').text()); } }); return false; }); }); </script> </head> <body> <table border="1" align="center"> <tr> <th>no</th> <th>name</th> <th>price</th> <th>qty</th> <th>update</th> </tr> <?php foreach( $_SESSION["psn"] as $i => $data ){ ?> <form action="sessionCartUpdate.php"> <input type="hidden" name="psn" value="<?php echo $_SESSION["psn"][$i];?>"> <tr> <td><?php echo $_SESSION["psn"][$i];?></td> <td><?php echo $_SESSION["pname"][$i];?></td> <td><?php echo $_SESSION["price"][$i];?></td> <td><input type="text" id="qty" name="qty" value="<?php echo $_SESSION["qty"][$i];?>"></td> <input type="submit" name="qty" <td><input type="submit" name="btnUpdate" value="update" /> <input type="submit" name="btnDelete" value="delete" /> </td> </tr> </form> <?php } ?> <tr><td colsan="5">total amount:<div id="result" class="box" style="height=350px;"></div><div id="result1" class="box" style="height=350px;"></div></td></td> </table> <p><a href="sessionProdList.php">continue to shop</a> <p><a href="sessionCartToDb.php">Put your order</a> </body> </html>-<script language="JavaScript"> $(document).ready(function() { $("form").mouseout( function() { // get value from the form var qtyVal = $('#qty').val(); // get $.ajax({ type: 'GET', url: 'getSunBody.php', data: { qty : qtyVal, }, success: function(data) { // get XML value $('#result').html($(data).find('qty').text()); $('#result1').html($(data).find('caution').text()); } }); return false; }); }); </script> </head> <body> <table border="1" align="center"> <tr> <th>no</th> <th>name</th> <th>price</th> <th>qty</th> <th>update</th> </tr> <?php foreach( $_SESSION["psn"] as $i => $data ){ ?> <form action="sessionCartUpdate.php"> <input type="hidden" name="psn" value="<?php echo $_SESSION["psn"][$i];?>"> <tr> <td><?php echo $_SESSION["psn"][$i];?></td> <td><?php echo $_SESSION["pname"][$i];?></td> <td><?php echo $_SESSION["price"][$i];?></td> <td><input type="text" id="qty" name="qty" value="<?php echo $_SESSION["qty"][$i];?>"></td> <input type="submit" name="qty" <td><input type="submit" name="btnUpdate" value="update" /> <input type="submit" name="btnDelete" value="delete" /> </td> </tr> </form> <?php } ?> <tr><td colsan="5">total amount:<div id="result" class="box" style="height=350px;"></div><div id="result1" class="box" style="height=350px;"></div></td></td> </table> <p><a href="sessionProdList.php">continue to shop</a> <p><a href="sessionCartToDb.php">Put your order</a> </body> </html>
Я был бы очень благодарен, если кто-нибудь может предложить доброе или возможное предложение или совет? Моя цель состоит в том, чтобы поместить другое число (переменные) в «область ввода» (имя или id как «qty») через использование ajax для получения общей суммы цены и показать результат в поле div (id = «result "или" result1 ").
Вы должны заменить атрибут id классом, потому что id должен быть уникальным в dom и с помощью класса вы можете сделать цикл, чтобы получить все количество предметов в корзине
Еще одна вещь, которую я заметил, что вы сделали индивидуальную форму foreach в корзине, должна быть одна форма с несколькими полями, также удалите эту строку <input type="submit" name="qty" это имеет смысл
<form action="sessionCartUpdate.php"> <?php foreach( $_SESSION["psn"] as $i => $data ){ ?> <input type="hidden" name="psn" value="<?php echo $_SESSION["psn"][$i];?>"> <tr> <td><?php echo $_SESSION["psn"][$i];?></td> <td><?php echo $_SESSION["pname"][$i];?></td> <td><?php echo $_SESSION["price"][$i];?></td> <td><input type="text" class="qty" name="qty[]" value="<?php echo $_SESSION["qty"][$i];?>"></td> <td><input type="submit" name="btnUpdate" value="update" /> <input type="submit" name="btnDelete" value="delete" /> </td> </tr> <?php } ?> </form> <script language="JavaScript"> $(document).ready(function() { $("form").mouseout( function() { var qtyVal =0; $( ".qty" ).each(function() { qtyVal =qtyVal + parseInt($(this).val()); }); // get $.ajax({ type: 'GET', url: 'getSunBody.php', data: { qty : qtyVal, }, success: function(data) { // get XML value $('#result').html($(data).find('qty').text()); $('#result1').html($(data).find('caution').text()); } }); return false; }); }); </script>-<form action="sessionCartUpdate.php"> <?php foreach( $_SESSION["psn"] as $i => $data ){ ?> <input type="hidden" name="psn" value="<?php echo $_SESSION["psn"][$i];?>"> <tr> <td><?php echo $_SESSION["psn"][$i];?></td> <td><?php echo $_SESSION["pname"][$i];?></td> <td><?php echo $_SESSION["price"][$i];?></td> <td><input type="text" class="qty" name="qty[]" value="<?php echo $_SESSION["qty"][$i];?>"></td> <td><input type="submit" name="btnUpdate" value="update" /> <input type="submit" name="btnDelete" value="delete" /> </td> </tr> <?php } ?> </form> <script language="JavaScript"> $(document).ready(function() { $("form").mouseout( function() { var qtyVal =0; $( ".qty" ).each(function() { qtyVal =qtyVal + parseInt($(this).val()); }); // get $.ajax({ type: 'GET', url: 'getSunBody.php', data: { qty : qtyVal, }, success: function(data) { // get XML value $('#result').html($(data).find('qty').text()); $('#result1').html($(data).find('caution').text()); } }); return false; }); }); </script>
// get field values $qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"];
Вместо использования $ _GET и $ _POST вы можете использовать $ _REQUEST, который будет предоставлять данные из POST или GET.