我有一个用户界面,其中有一些开关形式的复选框,当用户单击该按钮时,我还有一个按钮,单击事件我正在运行 ajax 将该数据发送到后端并保存到我的数据库中。
我的用户界面
$("#btn").on('click', function() {
$.ajax({
'url': 'DisplayImage',
'method': 'POST',
'data': formToJSON(),
'success': function(data) {
},
complete: function() {
},
'error': function(err) {
}
})
function formToJSON() {
return JSON.stringify({
ImageData: tableData,
});
};
})
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
float: right;
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input.success:checked+.slider {
background-color: #8bc34a;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card" style="margin: 20px 0">
<div class="card-header">Counter A</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">CounterA1.jpg <label class="switch "> <input type="checkbox" class="success" >
<span class="slider round" ></span>
</label>
</li>
<li class="list-group-item">CounterA2.jpg <label class="switch "> <input type="checkbox" class="success">
<span class="slider round"></span>
</label>
</li>
</ul>
<div class="card-header">Counter B</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">CounterB1.jpg <label class="switch "> <input type="checkbox" class="success">
<span class="slider round"></span>
</label>
</li>
</ul>
<div class="card-header">Counter C</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">CounterC1.jpg <label class="switch "> <input type="checkbox" class="success">
<span class="slider round"></span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<button id="btn"> Go</button>
我尝试将所有这些转换为这样的 JSON
var tableData = {"Counter A": {"Name": "CountA1.jpg","IsActive.jpg":"Y"}}
但是有两个问题:-
- 当我尝试输入
Counter B
数据时,它也显示不是有效的 JSON - 当我将其发送到
doPost
后端时,consoles
null
我不知道出了什么问题。我需要改变我的方法吗?
Ajax 代码
$("#btn").on('click',function(){
$.ajax({
'url': 'DisplayImage',
'method': 'POST',
'data' : formToJSON() ,
'success': function(data){
},
complete: function(){
},
'error': function(err){
}
})
function formToJSON()
{
return JSON.stringify({ImageData:tableData,});
};
})
Servlet doPost
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String imageData = request.getParameter("ImageData");
System.out.println(imageData);
}
我想到这个想法是因为我缺乏方法,我只是想知道解决这个问题的一些方法。我将在其中插入此数据的数据库表如下所示:
最佳答案
如果您想要 JSON 数组中的“counterA”和“counterB”,那么您需要像下面一样创建 JSON。
var tableData = [{ "Counter A": [{ "Name": "CountA1.jpg", "IsActive.jpg":"Y" } ,{"Name": "CountA2.jpg", "IsActive.jpg":"N"}]},
{ "Counter B": { "Name": "CountB1.jpg", "IsActive.jpg":"Y" } } ];
或者您可以将 json 数组转换为
var tableData = [ { "Counter": "Counter A", "Name": "CountA1.jpg", "IsActive.jpg":"Y" } ,
{ "Counter": "Counter A", "Name": "CountA2.jpg", "IsActive.jpg":"N" } ,
{ "Counter": "Counter B", "Name": "CountB1.jpg", "IsActive.jpg":"Y" } ];
要在数据库中插入 JSON 数据,我建议您进行一些谷歌搜索。 但为了便于理解,我发布了下面的代码和语句,这将对您有所帮助。
Create Model class, Ex: Counter.java
private String counter;
private String img;
private String flag;
public void setCounter(String counter){this.counter=counter;}
public String getCounter(){return this.counter;}
//Same getter and setter methods for img and flag.
Now get back to your main class
JSONArray jArray=new JSONArray(request.getParameter("ImageData"));
JSONObject obj;
JSONParser parser = new JSONParser();
List<Counter> lstCounter = new ArrayList<Counter>();
Counter counter = new Counter();
//Create Loop which iterates your jArray
{
JSONObject obj = (JSONObject)parser.parse( < jArray[iterator.next()] > ) //Here you need to parse the each your JSON and convert one by one in jsonobject
Ex: { "Counter": "Counter A", "Name": "CountA1.jpg", "IsActive.jpg":"Y" } as your first line you can extract the first row.
//Store the row in Model Counter as a list
counter = new Coutner();
counter.setCounter( <read data from json array> );
//same thing for img and flag then add to lstCounter
lstCounter.add( counter);
}
循环完成后,您将拥有可以像正常插入操作一样存储在数据库中的listArray。
关于javascript - 如何通过ajax向java servlet发送数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56538049/