要在单选按钮上单击来自其他 JSP 的另一个 div 中的数据，请单击 ajax

Posted 2023-05-08

技术标签:

【中文标题】要在单选按钮上单击来自其他 JSP 的另一个 div 中的数据，请单击 ajax【英文标题】：To show data in another div from other JSP on radio button click through ajax 【发布时间】：2021-12-29 22:19:53 【问题描述】：

我正在尝试通过 Ajax 调用在另一个 jsp 中的无线电单击上显示其他 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>

order.jsp(same 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>&nbsp; Hello, how are you?</p>

 </body>
 </html>

尽快解决。

【问题讨论】：

【参考方案1】：

这可能是您想要做的解决方案。

您的主 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>&nbsp; Hello, how are you?</p>

 </body>
 </html>

【讨论】：

尝试了您的解决方案，但我想显示一个 jsp 文件，当我在 ajax 下的 url 中输入名称“modusTest.jsp”时，我最后给出的代码该页面没有出现

以上是关于要在单选按钮上单击来自其他 JSP 的另一个 div 中的数据，请单击 ajax的主要内容，如果未能解决你的问题，请参考以下文章

引导和反应，在单选按钮上分配 .active 类