实时将数据从Javascript传递到HTML？

我累了，迷路了。看起来，以脱节的MVC/多语言方式进行编码的一个巨大挑战是找出在适当的时间在不同部分之间传递值的方法

以下代码不起作用

我有一个JS文件：

// GET DATA FROM A MAP PIN THAT A USER CLICKS ON
// The data is read from our API for that pin.

function getPinData(id, template) {
  $.ajax({
    url: "/api/pins/"+id,
    type: "GET",
    data: "JSON"
  }).success(function(data){

    var pinTitle = data["pin"]["activity"];
    var pinDescription = data["pin"]["description"];
    var pinGuideFirstName = data["pin"]["guide_first_name"];
    var pinGuideLastName = data["pin"]["guide_last_name"];
    var pinGuideRating = data["pin"]["guide_rating"];
    var pinGuideEmail = data["pin"]["guide_email"];

    var guideData = [pinGuideFirstName, pinGuideLastName,
                     pinTitle, pinGuideEmail];

    // the contents of guideData now need to be passed to a different page.

    // jQuery selector - messageGuideButton is simply a button that will bring up a
    // pop-up form that allows the user to send a message to the guide. I want to send          
    // guideData to this html form

    $( "#messageGuideButton" ).on("click", function() {
      $.ajax({
        url: "/message.html",
        type: "GET",
        data: guideData,
        success: function(response) {

          // Checking to see if guideData still exists in this function - it exists

          console.log("Guide Data in AJAX: " + guideData);   

          $('.popin').html(response).fadeIn();
          },
        beforeSend: function() {
          $('.popin').addClass('loading');
          },
        complete: function() {
          $('.popin').removeClass('loading');
          }
        });
      });
    })
}

message.html，这是一个弹出框，不是单独的页面

<div class="ui raised segment signin">
  <div class="cmborder">

    <script>
      console.log("Guide Data in Form: " + guideData); 
      // guideData comes back as undefined
      // I guess arrays can't be passed via GET
    </script>

    // This is Rails code and Rails' form helper methods

    <%= form_tag("/message", method: "post") do %>
      <!-- <p>Go ahead and message your guide</p> -->
      <div class="two fields">
        <div class="inline field">

    // I want to add the guideData into a hidden form field for submission later

         <%= hidden_field_tag 'message[guideFirstName]', guideData[0] %>
        </div>
        <div class="inline field">
          <%= hidden_field_tag 'message[guideLastName]', guideData[1] %>
        </div>
        <div class="inline field">
          <%= hidden_field_tag 'message[pinTitle]', guideData[2] %>
        </div>
        <div class="inline field">
          <%= hidden_field_tag 'message[guideEmail]', guideData[3] %>
        </div>

        <div class="field">
          <label>First Name</label>
          <%= text_field_tag 'message[firstName]', @current_user.first_name, class: "ui input", placeholder: "First Name" %>
        </div>
        <div class="field">
          <label>Last Name</label>
          <%= text_field_tag 'message[lastName]', @current_user.last_name, class: "ui input", placeholder: "Last Name" %>
        </div>
      </div>
      <div class="field">
        <label>Message title</label>
        <%= text_field_tag 'message[messageTitle]', nil, class: "ui input", placeholder: "Message Title" %>
      </div>
      <div class="field">
        <label>Message</label>
        <%= text_area_tag 'message[messageBody]', nil, class: "ui input", placeholder: "Message Body" %>
      </div>
      <div class="inline field">
        <%= hidden_field_tag 'message[currentUserEmail]', @current_user.email %>
      </div>
      <%= submit_tag "Submit", class: "ui blue submit button" %>

    <% end %>
  <span class='close_message' id="messageclose">&times;</span>
  </div>
</div>

我需要将指南数据信息传输到新表单中。我不想把它放在URL中，因为guideData可能会很长

---

我不知道该怎么办。

调用ajax时，它会转到rails服务器并尝试处理请求。由于guideData是一个js变量而不是全局变量，因此message.html无法看到它

此外，当浏览器尝试运行ajax时，可能会出现错误。数据选项无效。这就好像您正在将数据：[1,2,3]传递到$.ajax，而它是无效的。将其更改为data:{data:guideData}，并在messages.html中尝试将guideData更改为

message.html的另一个大问题是行与

<%= hidden_field_tag 'message[guideEmail]', guideData[3] %>

rails无法访问js变量。如果您按照我上面的建议，请将此处的guideData[3]更改为params[：data][3]

谢谢

我最后只是用了把手

我在一个API URL中提供了所有相关数据，因此我只需在JS中进行一次API调用

$.ajax({
    url: "/api/pins/"+id,
    type: "GET",
    data: "JSON"
  }).success(function(data){

    var pinTitle = data["pin"]["activity"];
    var pinDescription = data["pin"]["description"];
    var pinLong = data["pin"]["long"];
    var pinLat = data["pin"]["lat"];
    var pinGuideFirstName = data["pin"]["guide_first_name"];
    var pinGuideLastName = data["pin"]["guide_last_name"];
    var pinGuideRating = data["pin"]["guide_rating"];
    var pinGuideEmail = data["pin"]["guide_email"];
    var pinGuideExperience = data["pin"]["guide_experience"];
    var pinGuideAvatar = data["pin"]["guide_avatar"]["avatar"]["url"];

然后，我将数据绑定到一个散列对象/变量pinData中，并将pinData发送到我的Handlebar模板中

var pinData = {
        guideFirstName : pinGuideFirstName,
        guideLastName : pinGuideLastName,
        guideEmail : pinGuideEmail,
        guideExperience : pinGuideExperience,
        guideAvatar : pinGuideAvatar,
        guideRating : pinGuideRating,
        pinActivity : pinTitle,
        pinDescription2 : pinDescription,
        userEmail : currentUserEmail,
        userFirstName : currentUserFirstName,
        userLastName : currentUserLastName
      };

var messageHTML = HandlebarsTemplates['messages/index'](pinData);

messageHTML包含原始HTML代码，并将Handlebar变量直接注入其中

$( "#messagePinGuideButton" ).on("click", function() {
        $('.popin').html(messageHTML).fadeIn();
      });

然后，我使用jQuery打开一个弹出窗口，当我点击一个按钮并将消息HTML直接传递给它时

$( "#messagePinGuideButton" ).on("click", function() {
        $('.popin').html(messageHTML).fadeIn();
      });

---

很简单，很快，很直接。我喜欢它。

它抛出了什么错误？您应该单击页面中的inspect元素以查看显示了哪些JS错误。使用AngularJS或HandlebarsJS这样的工具会更容易吗？基本上，当我单击messageGuideButton按钮时，message.html尝试加载但从未加载。它只是被卡住了，因为它正在尝试加载guideData，并且没有定义。如果删除表格：+guideData；`它可以直接加载，但显然没有来自JS文件的数据。