我正试图通过Ajax调用在另一个jsp中的radio click上显示其他jsp内容。这是我的单选按钮列表代码，它在order.jsp文件中
<tr>
<td>
<h2>Payment Method</h2>
<div id="demo" class="payment-method">
<ul class=list-unstyled has-border-rigth">
<li>
<input type="radio" id="creditcardpayment" name="PaymentBrands" value=" Credit Card">
<label for="creditcardpayment">Credit Card</label>
</li>
<li>
<input type="radio" id="paypalpayment" name="PaymentBrands" value=" PayPal">
<label for="paypalpayment">PayPal</label>
</li>
<li>
<input type="radio" id="purchaseorderpayment" name="PaymentBrands" value="Purchase Order">
<label for="purchaseorderpayment">Purchase Order</label>
</li>
</ul>
<div id="result"></div>
</div>
</td>
</tr>
jsp(相同的jsp(中的Ajax代码我尝试了三种方法：
$(document).ready(function () {
$("input[type='radio']").click(function() {
var PaymentBrands = $(this).val();
alert(PaymentBrands);
$.ajax({
method:"POST",
url:"modusTest.jsp",
data: $('#result').serialize(),
dataType: "html",
success:function(response){
$('#demo').text(response);
}
});
$(document).ready(function () {
$("input[type='radio']").click(function() {
var PaymentBrands = $(this).val();
alert(PaymentBrands);
$.ajax({
url:"modusTest.jsp",
method:"POST",
data:{PaymentBrands:PaymentBrands},
success:function(data){
$('#result').html(data);
}
});
$(document).ready(function () {
var radioVal;
$("input[type='radio']").click(function() {
radioVal = $("[name=radio]:checked").val();
alert(radioVal);
$.post("/webapp/ecommerce/jsp/modusTest.jsp", {"processId": radioVal })
});
});
下面是modusTest.jsp
<html>
<head>
We are testing payment integration.
</head>
<body>
<p> Hello, how are you?</p>
</body>
</html>
尽快提供所需的解决方案。
这可能是您想要做的事情的解决方案。
您的主HTML文件
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<tr>
<td>
<h2>Payment Method</h2>
<div id="demo" class="payment-method">
<ul class=list-unstyled has-border-rigth">
<li>
<input type="radio" id="creditcardpayment" name="PaymentBrands" value="Credit Card">
<label for="creditcardpayment">Credit Card</label>
</li>
<li>
<input type="radio" id="paypalpayment" name="PaymentBrands" value="PayPal">
<label for="paypalpayment">PayPal</label>
</li>
<li>
<input type="radio" id="purchaseorderpayment" name="PaymentBrands" value="Purchase Order">
<label for="purchaseorderpayment">Purchase Order</label>
</li>
</ul>
<div id="result"></div>
</div>
</td>
</tr>
<script>
$(document).ready(function () {
var radioVal;
$("input[type='radio']").click(function () {
//use $(this).val() instead of checked $("[name=radio]:checked").val();
//this capture accurate & instant value. for more info read more about dom update
radioVal = $(this).val();
alert(radioVal);
$.ajax({
url: "somefile.php",
method: "POST",
data: { PaymentBrands: $(this).val() },
success: function (data) {
$('#result').html(data);
}
});
});
});
</script>
您的jsp文件将看起来与相同
<html>
<head>
We are testing payment integration.
</head>
<body>
<p> Hello, how are you?</p>
</body>
</html>