将 GET 请求中的数据附加到 div答案

【问题标题】：Append data from GET request to div将 GET 请求中的数据附加到 div
【发布时间】：2016-08-15 00:48:04
【问题描述】：

我有一个 GET 请求，它从服务器端函数获取一些信息并将数据附加到一系列 div 中。但是，当我 console.log 响应时，我得到了网站的整个 HTML，而不仅仅是我需要的值。

请求

$('#verify').click(function() {
  var parameters = {
    firstName: $('#firstName').val(),
    lastName: $('#lastName').val(),
    email: $('#email').val() };
  $.get('/verify', parameters, function(data) {
    console.log(data); //Returns full body of HTML
    $('#firstLast').val(data); // Doesn't work
  });
});

控制台日志

 <!DOCTYPE html>
<html>
   <head></head>
   <title>
      Demo
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="description" content="Demo project">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
      <style type="text/css"></style>
   </title>
   <body>
      <form method="post" action="post" id="plans" class="plans"><input id="firstName" type="text" name="firstName" value="rhys"><input id="lastName" type="text" name="lastName" value="edwards"><input id="email" type="text" name="email" value="@rhysedwards.com"><input id="submit" type="submit" name="submit" value="submit"></form>
      <div id="firstLast">rhysedwards@rhysedwards.com: false</div>
      <div id="firstDotLast">rhys.edwards@rhysedwards.com: false</div>
      <div id="fInitialLastName">redwards@rhysedwards.com: false</div>
      <div id="fInitialDotLastName">r.edwards@rhysedwards.com: false</div>
      <div id="firstNameLInitial">rhyse@rhysedwards.com: false</div>
      <div id="firstNameDotLInitial">rhys.e@rhysedwards.com: false</div>
      <div id="firstNameOnly">rhys@rhysedwards.com: true</div>
      <div id="lastNameOnly">edwards@rhysedwards.com: false</div>
      <div id="firstNameUnderscoreLastName">rhys_edwards@rhysedwards.com: false</div>
      <div id="fInitialUnderscoreLastName">r_edwards@rhysedwards.com: false</div>
      <div id="firstNameUnderscoreLInitial">rhys_e@rhysedwards.com: false</div>
      <input id="verify" name="verify" value="verify" type="submit"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><script src="./javascripts/script.js"></script>
   </body>
</html>

console.log 里面是我需要的：

<div id="firstLast">rhysedwards@rhysedwards.com: false</div>
<div id="firstDotLast">rhys.edwards@rhysedwards.com: false</div>
<div id="fInitialLastName">redwards@rhysedwards.com: false</div>
<div id="fInitialDotLastName">r.edwards@rhysedwards.com: false</div>     
<div id="firstNameLInitial">rhyse@rhysedwards.com: false</div>
<div id="firstNameDotLInitial">rhys.e@rhysedwards.com: false</div>
<div id="firstNameOnly">rhys@rhysedwards.com: true</div>
<div id="lastNameOnly">edwards@rhysedwards.com: false</div>
<div id="firstNameUnderscoreLastName">rhys_edwards@rhysedwards.com: false</div>
<div id="fInitialUnderscoreLastName">r_edwards@rhysedwards.com: false</div>
<div id="firstNameUnderscoreLInitial">rhys_e@rhysedwards.com: false</div>

翡翠模板：

block content
  form(method='post', action='post', class='plans', id='plans')
      input#firstName(type='text', name='firstName' value="rhys")
      input#lastName(type='text', name='lastName' value="edwards")
      input#email(type='text', name='email' value="@rhysedwards.com")
      input#submit(type='submit', name='submit', value='submit')
  #firstLast !{resultA}
  #firstDotLast !{resultB}
  #fInitialLastName !{resultC}
  #fInitialDotLastName !{resultD}
  #firstNameLInitial !{resultE}
  #firstNameDotLInitial !{resultF}
  #firstNameOnly !{resultG}
  #lastNameOnly !{resultH}
  #firstNameUnderscoreLastName !{resultI}
  #fInitialUnderscoreLastName !{resultJ}
  #firstNameUnderscoreLInitial !{resultK}
  input#verify(name='verify', value='verify', type='submit')

我如何从data 参数中获取每一个的 div 值？

【问题讨论】：

你能改变服务器端代码只返回你需要的吗？
如果响应没有为您提供所需的数据，那么您需要修改负责该操作的服务器函数。
用 .html 替换 .val 就可以了。现在找出为什么会出现整个页面。多么快乐。
block content-> 模板可能正在扩展更大的布局，包括整个 HTML 谷壳。
问题出在服务器端，使用 res.render 而不是 res.send。因此，它发送回的是整个模板而不是对象。

标签： javascript jquery html node.js pug

【解决方案1】：

由于您要将数据放入div 元素，请使用$('#firstLast').html(data);

.val() //is used for input elements

【讨论】：

太好了，可以很好地获取页面上的所有数据。干杯。