вю используется Ajax (Вардар)

　　Vue.js версии 2.0 рекомендуется AXIOS завершить АЯКС запрос. Вардар является Promise библиотеки HTTP на базе, вы можете использовать браузер и Node.js в.

　　Вардар Китайская библиотека документов: http://www.axios-js.com/zh-cn/docs/

1.Axios проста в использовании

1.axios отправить запрос простой GET

Справочная информация:

    @RequestMapping ( "/ индекс" )
    @ResponseBody
    общественности Карта индекс (HttpServletRequest запрос, HttpServletResponse ответ, @RequestParam Карта условие) {
        System.out.println (состояние);
        // разрешить кросс-доменных запросов Ajax 
        response.setHeader ( "Access-Control-Разрешить-Origin", "*" );
         возвращение на состояние Состояние;
    }

 

 

Прием:

<! DOCTYPE HTML > 
< HTML >

    < Голова > 
        < мета кодировок = "UTF-8"  /> 
        < название > </ название > 
        < сценарий SRC = "JS / axios.min.js" Тип = "текст / JavaScript" кодировка = "UTF-8" > < / скрипт > 
    </ голова >

    < Body > 
        < Script > 
            // дается запрос создания идентификатора пользователя 
            axios.get ( ' HTTP: // локальный :? 8088 / Weixin / Test / index.html имя = ZS ' )
                .then ( функция (ответ) {
                    console.log (ответ);
                })
                , улов ( функция (ошибка) {
                    console.log (ошибка);
                });
        </ Скрипт > 
    </ тело >

</ HTML >

 

Результаты:

 

 

 

Выше также может запросить:

        <Script>
             // запрос может быть сделано выше 
            axios.get ( 'HTTP: // локальный: 8088 / Weixin / Test / index.html' , {
                    Титулы: {
                        имя: 'Zs2'
                    }
                })
                .then ( функция (ответ) {
                    console.log (ответ);
                })
                , улов ( функция (ошибка) {
                    console.log (ошибка);
                });
        </ Скрипт>

 

 

2. POST затребовал

Фон требует фильтры позволяют кросс-доменные запросы:

пакет cn.qlq.filter;

импорт java.io.IOException;

импорт javax.servlet.Filter;
импорт javax.servlet.FilterChain;
импорт javax.servlet.FilterConfig;
импорт javax.servlet.ServletException;
импорт javax.servlet.ServletRequest;
импорт javax.servlet.ServletResponse;
импорт javax.servlet.annotation.WebFilter;
импорт javax.servlet.http.HttpServletResponse;

/ **
 * Разрешить запросы междоменных
 * / 
@WebFilter (FILTERNAME = "corsFilter", urlPatterns = "/ *" )
 общественный  класс CorsFilter реализует фильтр {
     общественного  недействительный doFilter (ServletRequest запрос, ответ ServletResponse, FilterChain цепи)
             бросает IOException, ServletException {
        System.out.println ( 1 );
        HttpServletResponse response2 = (HttpServletResponse) ответ;
        response2.setHeader ( "Access-Control-Allow-Origin", "*"); // 解决跨域访问报错 
        response2.setHeader ( "Access-Control-Allow-метода", "POST, PUT, GET, OPTIONS, DELETE" );
        response2.setHeader ( "Access-Control-Max-Age", "3600"); // 设置过期时间 
        response2.setHeader ( "Access-Control-Allow-Headers" ,
                 "Происхождение, X-Requested-With, Content-Type, Accept, client_id, UUID, авторизация" );
        не response2.setHeader ( "Cache-Control", "нет кэша, нет-магазина, нужно обязательно перепроверять"); // 支持HTTP
                                                                                         // 1,1. 
        не response2.setHeader ( "Прагма", "нет кэша"); // 支持HTTP 1.0.
                                                    // response.setHeader ( "Expires",
                                                     // "0");

        chain.doFilter (запрос, ответ);
    }

    @Override
    общественного  недействительными уничтожить () {

    }

    @Override
    общественного  недействительными инициализации (FilterConfig arg0) бросает ServletException {

    }

}

 

Контроллер Код:

    @RequestMapping ( "/ индекс" )
    @ResponseBody
    общественности Карта индекс (HttpServletRequest запрос, HttpServletResponse ответ, @RequestBody Карта условие) {
        System.out.println (состояние);

        вернуть состояние;
    }

 

 

Передний код:

        <скрипт> 
            axios.post ( 'HTTP: // локальный: 8088 / Weixin / тест / index.html' , {
                    Имя: "Фред ,
                    LastName: 'щебенки'
                })
                .then (функция (ответ) {
                    console.log (ответ);
                })
                , улов (функция (ошибка) {
                    console.log (ошибка);
                });
        </ Скрипт>

 

Результаты:

 

 

сообщение заголовка запроса Content-Type приложения / JSON, передает запрос данных JSON

 

 

 

3. Структура отклика

{
   // `data` ответа , предоставляемый сервер 
  данные: {},

  // `status` код состояния HTTP с сервера в ответ на 
  статус: 200 ,

  // информация HTTP состояния с сервера в ответ на `statusText` 
  в его статусе:«КИ» ,

  // `headers` заголовка ответа сервера 
  заголовки: {},

   // `config`是为请求提供的配置信息
  конфигурация: {},
  // 'запрос' 
  // ` request` есть запрос , который генерируется этот ответ 
  // это последний экземпляр ClientRequest в node.js (в переадресациях) 
  // и XMLHttpRequest экземпляр браузера 
  запрос: {}
}

 

 

В 2.vue Аксиос использования

Back-конец кода:

    @RequestMapping ( "/ индекс" )
    @ResponseBody
    общественности Карта индекс (HttpServletRequest запрос, HttpServletResponse ответ, @RequestBody Карта условие) {
        condition.put ( "имя", "ZS" );
        condition.put ( "возраст", 25 );
        вернуть состояние;
    }

 

 

Прием:

<! DOCTYPE HTML>
<HTML>

    <Голова>
        <Мета кодировка = "UTF-8" />
        <Название> </ название>
        <Сценарий SRC = "/ vue.min.js JS" Тип = "текст / JavaScript" кодировка = "UTF-8"> </ скрипт>
        <Сценарий SRC = "JS / axios.min.js" Тип = "текст / JavaScript" кодировка = "UTF-8"> </ скрипт>
    </ HEAD>

    <Тело>
        <DIV ID = "приложение">
            <H1> {{data.name}} - {{data.age}} </ h1>
        </ DIV>
        <Тип скрипта = "текст / JavaScript">
            новый вид ({
                на: '#app' ,
                данные: {
                    данные: нулевой
                },
                установлен () {
                    Вардар
                        .post ( 'HTTP: // локальный: 8088 / Weixin / тест / index.html' , {
                             'тест': 123
                        })
                        .then (ответ => ( это .data = response.data))
                        . Выгода ( функция (ошибка) { // Сбой запроса обработки 
                            console.log (ошибка);
                        });
                }
            })
        </ Скрипт>
    </ Body>

</ Html>

 

Результаты: