如何从 PHP Echo 传回输入值?
How to pass back input value from PHP Echo?
我 运行 在传回正确的表单和输入给另一个 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> 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 的 Echo 函数无法传回值,或者可能是我的 ajax 读取它有问题。
我猜你想使用 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.
中的名称匹配
- 响应将插入到“#cart-item”容器中。
试试看,尽快给我反馈
我 运行 在传回正确的表单和输入给另一个 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> 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 的 Echo 函数无法传回值,或者可能是我的 ajax 读取它有问题。
我猜你想使用 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. 中的名称匹配
- 响应将插入到“#cart-item”容器中。 试试看,尽快给我反馈