1

Хотела отправить запрос, не перезагружая страницу. Использовала для этого ajax фрэймворк taconite. Посмотрела пример оттуда и решила сделать точно так же. Но мне нужно отправить кое-какие данные и с помощью этих данных удалить некий объект в базе. То есть выбираешь и нажимаешь удалить, потом выходит окошко "Вы точно хотите удалить?", нажав да, он отправляет все данные об этом человеке (которого нужно удалить) и удаляет.

С помощью обычного jsp+servlet запрос отправляется и удаляется. Но мне нужно, чтобы страница не перезагружалась. Поэтому я делаю, как на примере, все получается. Только не знаю, как вставить часть, где должны удалится данные. Как вставить сам запрос delete?

Это отправка метода:

<form method="#">
       <input type="hidden" name="id" id="id" value="<%=dataList5.get(5)%>"/>
        <center><p style="color: #fff;">Вы точно хотите удалить?</p>
            <a href="javascript:doEcho('echo.jsp');">Да</a>
            <a href="javascript:location.reload()" />Нет</a>
    </form>

А это сам echo.jsp:

<%@page import="java.sql.DriverManager"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/xml"%>

 <%
     String id = request.getParameter("id");
 %>
 <taconite-root xml:space="preserve">

 <taconite-replace-children contextNodeID="echoResponse">
 <%
  Connection con = null;
    Statement sql = null;
    ResultSet rs = null;
    List dataList5 = new ArrayList();
       try{
Class.forName("com.mysql.jdbc.Driver");
con = (Connection)DriverManager.getConnection("jdbc:mysql://localhost/pod", "diana", "123456789");
sql = con.createStatement();
}catch(Exception e){

    out.print("ERROR IN CONNECTION" + e);
}

     String query = "delete from employee where id_people ='"+id+"'";
     try{
        try (Statement s = con.createStatement()) {
            s.executeUpdate(query);
            rs = s.getResultSet();

        }
         }catch (Exception e) {
         System.out.println("Exception is ;" + e);
    }
 %>
     <div>
        Your id is: <%=id%>

    </div>

</taconite-replace-children>

 </taconite-root>

Так не работает. Помогите сделать правильно. Не обязательно taconite, подскажите, как иначе можно сделать без перезагрузки.

Обновление

@StixoTvorec, Я сделала, но проще чем у вас, так как не поняла что означают строки после success, error Сделала и вызвала метод call()

<script type="text/javascript" language="javascript">
    function call() {
      var msg   = $('#fio');
        $.ajax({

          type: 'POST',
          action: 'delete',
          data: msg,
          success: function(data) {
            alert('Удалено');
          },
          error:  function(xhr, str){
                alert('Возникла ошибка: ' + xhr.responseCode);
            }
        });

    }
</script>

Так вот здесь у меня выходит алерт удалено, но из базы то ничего не удалилось. Хотела сделать через урл, но как бы я не указывала путь к сервлету delete все равно выходила ошибка. Помогите пожалуйста, как нужно указать правильно урл, я смотрела здесь http://api.jquery.com/jquery.ajax/ и много где, вроде так и сделала, но мой сервлет не видит. Все дело в том что jsp и servlet находятся в разных папках? Так я и папку указывала:(

1
  • О, теперь все! Спасибо, StixoTvorec, за ваше терпение на мои глупые вопросы:)
    – lp_4eva
    Commented 21 нояб. 2014 в 10:44

1 ответ 1

3

Лучше писать не

<a href="javascript:...

а просто голую ссылку с неким ID и уже на этот ID вешать обработку методами JS. jQuery подключен к странице?

<a href="#" id="yes">Yes</a>
<script>
$(document).on('#yes', 'click', function() {
$.ajax(...бла-бла-бла...); //отправка данных
return false; //тут мы говорим, что стандартная реакция на кнопку должна отсутствовать
});
</script>

Можно и без jQuery, чистым JS, но так проще.

Читайте про асинхронные запросы.

А вторая ссылка должна вести просто на #.

http://api.jquery.com/jquery.ajax/

P.S. Решил добавить рабочий пример на jQuery:

$.ajax({
        url: '/admin/manage_categories/',
        method: 'POST',
        data: {'id': id},
        success: function (data, textStatus, jqXHR) {

            if(parent_id == 0) {

                $child.html(data);
            } else {
                $child.html('');
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {

            $child.html('Ошибка при загрузке...');
        },
        beforeSend: function (xhr) {

            $child.html('Подождите...');
        }
    });

});

Обновление

А все данные Вы можете передать в параметре data аякса.

Обновление

Нет-нет. только строгое разделение html и бизнес-логики!
И никаких объектов из js в серверную часть.
Чтобы удалить данные в БД, Вам нужно знать только ID этих данных. Вот этот ID и отправьте. Вам даже форма не нужна - 2 чистых ссылки или кнопки, без разницы.

Обновление

Ну, в общем и целом да, можно и объекты отправлять. Хотя это обычно не требуется. И кстати, по умолчанию ajax и так отправляет все в json POST методом (тоже для общего развития).

{if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')}

Подтверждение можно сделать несколькими способами: переменной с true|false, которая меняет свое значение при первом нажатии; признаком отображения/скрытия предупреждающего текста... С ходу эти 2 вспомнил. Уверен, есть еще.

Обновление

Да, путь писать в поле url естественно. Данные на стороне сервера обязательно (обычно) чем-то обработать (экранировать слеши, чтобы избежать инъекций)

Обновление

<script type="text/javascript" language="javascript">
function call() {
var msg = $('#fio');
$.ajax({
      url: '/path/to/echo.jsp',
      method: 'POST',
      data: {variable: 'какие-то данные', id: 'тут ID для удаления'}, // можно было обойтись без variable, но это просто пример
      success: function(data) {
        alert('Удалено');
      },
      error:  function(xhr, str){
            alert('Возникла ошибка: ' + xhr.responseCode);
        }
    });

}
</script>

В echo.jsp вы должны принять POST данные (в нашем случае id и variable) и удалить нужное поле (не забываем про безопасность).
Вы принимаете POST данные?

Обновление

var msg = $('#id').val();

<input type="hidden" id="id" value="<%=dataList5.get(5)%>"/>

data: {id: msg}

//забыли .val()

//name обычно не требуется, если Вы отправляете данные ajax

//<%=dataList5.get(5)%> - это отдает массив? Тогда в цикле выводите несколько полей ввода, у Вас там что-то невообразимое сейчас скорее всего, если там вывод от массива.

//насколько я понял, Вы выводите записи табличкой? Тогда поставьте на каждой строке свою кнопочку с неким параметром:

<a class='btn_del' del_id="1">del 1</a>
<a class='btn_del' del_id="3">del 3</a>
<a class='btn_del' del_id="6">del 6</a>

Затем Вы должны обработать нажатия:

<script>
$(function(){ //чуть не забыл. Это чтобы подождать построения DOM
  $('a.btn_del').click(function() {
    //$(this) - ссылка, на которую мы нажали
    var id = $(this).attr('del_id'); //данные в атрибутах конечно не приветствуются, но практикуются ;-)
    /// тут уже код ajax, ID мы знаем
    return false; //отключаем реакцию на ссылку
  });
});
</script>
7
  • А если поставить метод json, то и объекты на сервер полетят
    – xFloooo
    Commented 18 нояб. 2014 в 12:42
  • Ну, я для общего развития отписал. )
    – xFloooo
    Commented 18 нояб. 2014 в 13:12
  • StixoTvorec, спасибо за ответ. Вопрос, а путь на сервлет в поле url прописать? Создать сервлет, который будет делать удаление?
    – lp_4eva
    Commented 19 нояб. 2014 в 3:04
  • Так вот здесь у меня выходит алерт удалено, но из базы то ничего не удалилось. Хотела сделать через урл, но как бы я не указывала путь к сервлету delete все равно выходила ошибка. Помогите пожалуйста:(
    – lp_4eva
    Commented 21 нояб. 2014 в 6:08
  • 1
    Т.е. мы не вызываем для всех ссылок одну функцию, а просто привязываем к нужным ссылкам обработчик. P.S. Вопросы не глупые, был рад помочь. Глупыми они были бы, если бы Вы их не задали. Удачи!
    – StTv
    Commented 21 нояб. 2014 в 10:41

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.