如何从php echo传回输入值?

kadbb459  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(370)

我在将正确的表单和输入传递给另一个ajax调用方以用于其他用途时遇到了一个问题。
下面是前端js代码

<script type="text/javascript">

function displayProduct() {
  $.ajax({
      url: 'action.php',
      method: 'post',
      data: {
        display: "displayPro",

      },
      success: function(data) {
        $("#display_product").html(data);

      }
    });
}

$(document).ready(function() {
  console.log("Initialised");

  // Add product info to server
  $(".addItem").click(function(e) {
    console.log("Run");
    e.preventDefault();
    var $form = $(this).closest(".form-submit");
    var pro_id = $form.find(".pro_id").val();
    var pro_name = $form.find(".pro_name").val();
    var pro_price = $form.find(".pro_price").val();
    var pro_img = $form.find(".pro_img").val();
    var pro_code = $form.find(".pro_code").val();

    var pro_qty = $form.find(".pro_qty").val();

    $.ajax({
      url: 'action.php',
      method: 'post',
      data: {
        pro_id: pro_id,
        pro_name: pro_name,
        pro_price: pro_price,
        pro_qty: pro_qty,
        pro_img: pro_img,
        pro_code: pro_code
      },
      success: function(response) {
        $("#notification").html(response);
        window.scrollTo(0, 0);
        loadCartBadge();
      }
    });
  });

  loadCartBadge();

  function loadCartBadge() {
    $.ajax({
      url: 'action.php',
      method: 'get',
      data: {
        cartItem: "cart_item"
      },
      success: function(response) {
        $("#cart-item").html(response);
      }
    });
  }
});

这是html

<div class="container">
<h2>Products</h2>
<div id="notification"></div>
<div class="row mt-2 pb-3" id="display_product">

      <br>
  </div>
</div>

和php来处理数据

if (isset($_POST['display']) == 'displayPro') {

$query = $conn->prepare('SELECT * FROM product');
$query->execute();
$result = $query->get_result();

$data = '';

while ($row = $result->fetch_assoc()) :

    //Constructor

    $pro_id = $row['id'];
    $pro_name = $row['product_name'];
    $pro_price = $row['product_price'];
    $pro_image = $row['product_image'];
    $pro_code = $row['product_code'];
    $pro_qty = $row['product_qty'];

    $data .= '
    <div class="col-md-3 col-sm-6 my-3 my-md-0">
    <div class="card-deck">
    <div class="card p-2 ">
    <img src="' . $pro_image . '" class="card-img-top" height="200">
    <div class="card-body p-1">
    <div class="block"> </div>
    <h5 class="card-title text-center text">' . $pro_name . '</h4>
      <h5 class="card-text text-center text"> S$ ' . $pro_price . '
        </h5>

    <div class="card-footer p-1">

    <form action="" class="form-submit">
    <div class="row p-2">
    <div class="col-md-6 py-1 pl-4">
        <b>Quantity : </b>
    </div>
    <div class="col-md-6">
    <input type="number" class="form-control pro_qty" value="' . $pro_qty . '">
    </div>
    </div>
    <input type="hidden" class="pro_id" value="' . $row['id'] . '">
    <input type="hidden" class="pro_name" value="' . $row['product_name'] . '">
    <input type="hidden" class="pro_price" value="' . $row['product_price'] . '">
    <input type="hidden" class="pro_img" value="' . $row['product_image'] . '">
    <input type="hidden" class="pro_code" value="' . $row['product_code'] . '">
    <button class="button is-black btn-block addItem"><i class="fas fa-cart-plus"></i>&nbsp;&nbsp;Add to
    cart</button>
    </form>

    </div>
    </div>
    </div>
    </div>
    <br>
    </div>';

endwhile;

echo $data;

echo '<input type="hidden" class="pro_id" value="' . $pro_id . '">';
echo '<input type="hidden" class="pro_id" value="' . $pro_name . '">';
echo '<input type="hidden" class="pro_id" value="' . $pro_price . '">';
echo '<input type="hidden" class="pro_id" value="' . $pro_image . '">';
echo '<input type="hidden" class="pro_id" value="' . $pro_code . '">';
echo '<input type="hidden" class="pro_id" value="' . $pro_qty . '">';
}

我尝试了几种方法将输入更改为<?php>标记,但它也不起作用
我猜php中的echo函数无法传回该值,或者可能是我的ajax在读取它时遇到了问题。

628mspwn

628mspwn1#

我猜您希望使用ajax从服务器发送和检索数据。
按照以下步骤1)首先将id添加到表单中。2) 我可以看到,您没有为输入值指定name=“pro_name”这样的名称,因此对所有输入字段都这样做。3) 将代码添加到下面的脚本中

$('.addItem').click(function(){
          $.ajax({
              url:"action.php",
              method:"POST",
              data:$('#theFormID').serialize(),
              success:function(data)
              {
                  $("#cart-item").html(data);
              }
          });
      });

注:
使用ajax发送的表单的id为id=“theformid”。您可以给它取任何名称,但必须与ajax中的名称匹配。
响应将插入到“#购物车项目”容器中。试试看,尽快给我反馈。

相关问题