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

后台：






前端js代码：


前端html页面




后端查询并返回的数据




前端页面显示的结果




前端html页面在使用v-for遍历search_result时，无法通过item.pName获取pName的值，search_result定义成一个数组(search_result: [])，因为时间原因只学了vue初级，想请教大佬这个问题怎么解决

看不到图片啊，你直接发代码，别发图片。

that.search_result = JSON.parse(response.data);
 

后台返回的数据应该是对象套在数组里面，如：
[{picPath: "C:\Users\yunsuowu\Desktop\2.jpg", pName: "测试2"，，，，，，，}]

你只返回对象话需要在前端再套一层数组
that.search_result = [JSON.parse(response.data)];

或者把对象追加到原本的数组中
that.search_result.push(JSON.parse(response.data));
 

啥也看不见啊

没有设置跨域请求

后台：

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>

后台响应的数据

前端显示出来的数据

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

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

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

你用的是不是 

com.alibaba.fastjson.JSONArray这个包，toJSON是会把你的数据转成json对象格式

这里应该用JSONObject.parseArray这个方法，或者JSONArray.parseArray

另外其实你也可以把你的list直接return回去

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

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