Question

我的第一个名为DisplayFruitToOrder（）的JavaScript进行Ajax调用，返回带有水果信息的表。如果它是Apple，Orange或Banana，我想在水果名称旁边显示复选框。在以HTML格式显示表格后，用户将标记该复选框以订购这3个水果中的任何一个，然后单击“订购水果”按钮。单击Order Fruit按钮后，我想触发另一个名为orderFruit（）的JavaScript函数，该函数将进行另一个Ajax调用以订购用户选择的水果。我完成了水果名称部分旁边的显示复选框，但是我被困在第二部分，即仅从Apple，Orange或Banana订购标记的复选框。如何将从一个Ajax调用返回的表中的单元格内的选中值传递给另一个？我从第一个JavaScript函数附加了从第一个Ajax调用生成的示例表的图像。 enter image description here

＆＃13;

var fruitToOrder = "None";

function DisplayFruitToOrder() {
    $.ajax({

        type: "GET",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        dataType: "json",
        url: "http://localhost:5000/listFruits",

        success: function(data) {
            console.log(data)
            resultLen = Object.keys(data).length;
            var tr;
            for (var i = 0; i < resultLen; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + data.FruitNumber + "</td>");
                tr.append("<td>" + data.FruitColor + "</td>");
                if (data.FruitName == "Apple" || "Orange" || "Banana") {
                    tr.append("<td>" + data.FruitName + " <input type='checkbox' />" + "</td>");
                    fruitToOrder = data.FruitName;
                } else {
                    tr.append("<td>" + data.FruitName + "</td>");
                    fruitToOrder = 0;
                }
                tr.append("<td>" + data.FruitShape + "</td>");
                $('table').append(tr);
            }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            // handle your fail response here							
            console.log("Unknown error occured. Unsuccessful in getting response.");
        }
    }); //end of ajax	
} //end of DisplayFruitToOrder() function

function orderFruit() {
    console.log("Fruit to order is: " + fruitToOrder);
    $.ajax({

        type: "GET",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        dataType: "text",
        url: "http://localhost:5000/orderFruit?fruitName=" + fruitToOrder,

        success: function(data) {
            console.log(data)
        },
        error: function(xhr, ajaxOptions, thrownError) {
            console.log("Unknown error occured. Unsuccessful in getting response.");
        }
    }); //end of ajax	
} //end of orderFruit() function

＆＃13;

<!DOCTYPE html>
<html lang="en">    
  </head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style>
		table {
			font-family: arial, sans-serif;
			border-collapse: collapse;
			width: 100%;
		}

		td, th {
			border: 1px solid #dddddd;
			text-align: left;
			padding: 8px;
		}

		tr:nth-child(even) {
			background-color: #dddddd;
		}
	</style>
  <head>
  <body onload="DisplayFruitToOrder()">
  
  <div id="divTable" >
		<table>
		  <tr>
			<th>FruitNumber</th>
			<th>FruitColor</th>
			<th>FruitName</th>
			<th>FruitShape</th>
		  </tr>
		</table>
	<br>
	</div>
	
	<div id="orderFruit" class="container">
    	<br>
		<input type="button" value="Order Fruit" onclick="orderFruit()" />
		<br>	
	</div>
   </body>
</html>

＆＃13;

Answer 1

为所有复选框和数据属性设置类名称，例如

tr.append("<td>" + data.FruitName + " <input type='checkbox' class='chkbx' data-fruit='"+data.FruitName+"' /></td>");

然后点击按钮，

function orderFruit() {
var fruitToOrder = "";

$('.chkbx:checkbox:checked').each(function(){
fruitToOrder = fruitToOrder + $(this).attr("data-fruit") + ",";
});
    console.log("Fruit to order is: " + fruitToOrder);

}

如何将从一个ajax调用返回的表中的单元格内检查的值传递给另一个ajax调用？

1 个答案: