springboot2.2.6+vue2.6.12后台发送JSON字符串给前端,前端无法取值

后台：

controller:

@RequestMapping(value = "/getProductByName", method= RequestMethod.POST)
public void getProductByName(HttpServletRequest request, HttpServletResponse response) {
    String pName = request.getParameter("pName");
    Product product = new Product();
    product.setPName(pName);
    List<Product> list = productService.getProductByName(product);
    Object json = JSONArray.toJSON(list);
    String productInfo = json.toString();
    try {
        DealResponse.dealResponse(response,productInfo);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

DealResponse.dealResponse：

public static void dealResponse(HttpServletResponse response,String info) throws IOException {
    response.setContentType("application/x-www-form-urlencoded;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println(info);
}

前端js代码：

pro_name: function (val) {
  if( val == '' || val == null) {
    this.isActive = true;
  } else {
    this.isActive = false;
    let that = this;
    syn_request({
      method: 'POST',
      url: '/getProductByName',
      headers: {
        'Content-Type':'application/x-www-form-urlencoded'
      },
      data: Qs.stringify({
        pName: val
      })
    }).then(response => {
      that.search_result = response.data;
    }).catch(err => {
      alert(err);
    })
  }
}

html页面：

<ul class="layui-nav search_result" @mouseleave="leave" :class="{result:isActive}" v-cloak >
  <li class="layui-nav-item" lay-unselect="" style="line-height:40px;width:100%" v-for="(index,item) in search_result" @click="getId(item.pId)">
    <a >{{item.pName}}.{{index}}</a>
  </li>
</ul>

后台响应的数据:

[{picPath: "C:\Users\yunsuowu\Desktop\2.jpg", pName: "测试1", planQuantity: 30, price: 13.3, parameter: "参数1:颜色||参数2:内存组合", …},

{picPath: "C:\Users\yunsuowu\Desktop\2.jpg", pName: "测试2", planQuantity: 41, price: 23.6, parameter: "参数1:颜色||参数2:内存组合", …}]

前端显示的数据.picPath: "C:\Users\yunsuowu\Desktop\2.jpg", pName: "测1", planQuantity: 30, price: 13.3, parameter: "参数1:颜色||参数2:内存组合", …

前端html页面在使用v-for遍历search_result时，无法通过item.pName获取pName的值，但是显示出来的是(.picPath: "C:\Users\yunsuowu\Desktop\2.jpg", pName: "测1", planQuantity: 30, price: 13.3, parameter: "参数1:颜色||参数2:内存组合", …)，search_result定义成一个数组(search_result: [])，因为时间原因只学了vue初级，想请教大佬这个问题怎么解决

讲了一大串 但是没明白您要问什么

函数的返回值用map，要返回map对象，不用response对象返回了

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

application/json 

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y