Как отправить данные в сервлет Java через AJAX - PullRequest
1 голос
/ 11 июня 2019

У меня есть пользовательский интерфейс, в котором есть несколько флажков в виде переключателя. У меня также есть кнопка, когда пользователь нажимает на эту кнопку. Событие при нажатии. Я запускаю 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"}} 

но есть две проблемы: -

  • Там написано, что JSON недействителен, когда я пытался также ввести Counter B данные
  • Когда я отправляю это на задний план в моем doPost это consoles ноль

Я не знаю, что происходит не так. Мне нужно изменить свой подход?

Код 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);

}

Я думал об этой идее, так как мне не хватает подхода, я просто хочу знать некоторые подходы к этой проблеме. Моя таблица базы данных, в которую будут вставлены эти данные, выглядит так:

This

Ответы [ 3 ]

1 голос
/ 11 июня 2019

Если вы хотите использовать "counterA" и "counterB" в массиве JSON, тогда вам нужно создать 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, который готов сохранить в БД, как и обычная операция вставки.

0 голосов
/ 11 июня 2019

Вы можете использовать тег данных в jquery, как показано ниже данные: { Данные1: Данные1, Данные2: Данные2, Данные3: Данные3,}

0 голосов
/ 11 июня 2019

Попробуйте использовать

Scanner scanner = new Scanner(request.getInputStream())
String imageData = scanner.nextLine();

И проверьте, все еще ли оно пусто

...