使用typescript实现 ionic 框架两端交互,解决跨域发送请求的问题

/*********************************** 后端Java(springmvc框架)************************************/

/**
     * 后端代码
     *
     * @param name
     * @param request
     * @param response
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/http")
    public String ajax(String name, HttpServletRequest request,HttpServletResponse response) {
        // 在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息。
        // 如果设置 Access-Control-Allow-Origin:*,则允许所有域名的脚本访问该资源。
        response.setHeader("Access-Control-Allow-Origin", "*");
        System.out.println(name);
        System.out.println(request.getParameter("name1"));
        return "{\"name\":\"Hello Word!\",\"name1\":\"你好 世界\"}";

    }

/*********************************** 前端ionic框架************************************/

/**
   * post 请求
   */
  post() {
    this.http.post("http://localhost:1113/http",{},
      /*(1).application/x-www-form-urlencoded
      在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。
        下边是说明: application/x-www-form-urlencoded: 窗体数据被编码为名称/值对。这是标准的编码格式。
         multipart/form-data: 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。
        text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。
      form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,
        默认为application/x-www-form-urlencoded。
        当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2...),
       然后把这个字串append到url后面,用?分割,加载这个新的url。 当action为post时候,
       浏览器把form数据封装到http body中,然后发送到server。 如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。
       但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,
       并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息,并加上分割符(boundary)。*/
      {headers:{"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8"},
        params:{"name":"Hello Word!","name1":"你好 世界"}}) .toPromise()
      .then((data: any) => {
        console.log('post');
        console.log(data.name);
        console.log(data.name1);
      })
      .catch((err) => {
        console.log('error');
        console.log(err);
      });
  }

  /**
   * get 请求
   */
  get() {
    this.http.get("http://localhost:1113/http",
      {headers:{"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8"},
        params:{"name":"Hello Word!","name1":"你好 世界"}}) .toPromise()
      .then((data: any) => {
        console.log('get');
        console.log(data.name);
        console.log(data.name1);
      })
      .catch((err) => {
        console.log('error');
        console.log(err);
      });
  }

/*********************************后端打印结果********************************/


/**************************************前端打印结果***********************************/


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭