![](/img/trans.png)
[英]How to iterate through an array send via AJAX in Java servlet?
[英]How to send data to java servlet via ajax
我有一個UI,其中有一些開關形式的復選框,我也有一個按鈕,當用戶單擊該按鈕時,單擊事件我正在運行ajax將數據發送到后端並保存到我的ajax中。數據庫。
我的UI
$("#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數據,建議您使用Google。 但是出於一點了解,我在下面發布了代碼和聲明,對您有幫助。
創建模型類,例如: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.
現在回到您的主要課程
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。
您可以像下面的數據一樣在jquery中使用數據標簽:{Data1:Data1,Data2:Data2,Data3:Data3,}
嘗試使用
Scanner scanner = new Scanner(request.getInputStream())
String imageData = scanner.nextLine();
並檢查它是否仍然為空
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.