Question

假设我在文档中有两个div。第一个具有控制字符，第二个应该用作预览，用户工作的结果。

HTML

<div id="workHere">
  <form id="workForm" action="php/create_pdf.php" method="POST">
    <input type="text" class="c" id="inputId">
      // etc...
  </form>
</div>

<div id="preview"></div>

当用户插入一些值时，#workForm中的所有这些值都应发送到create_pdf_preview.php，结果必须在#preview中进行描述。

JS + jQuery

我尝试使用.load jQuery方法，实际上它有效。但是我不知道我是否以正确的方式使用它并且这个解决方案看起来不可接受，因为GET方法存在长度限制并且执行过于复杂 - 我不得不向JS收集数据

`var datafield = document.getElementById("inputId").value;`

然后我可以在.load方法

中使用它

$(".c").on('blur', function(){
  $("#preview").load("php/create_pdf_preview.php?data=" + datafield);
});

我知道这是愚蠢的方式，而且我知道AJAX或JSON有更简单的可能性，但这对我来说仍然是一个仙境，这就是为什么这个问题发布的原因。任何人都可以给我某个方向？我不是在问任何解决方案。让我问我是否会证明更多细节。非常感谢你。

Answer 1

使用POST发布数据。 POST可以保存更多数据，因此您可能不会轻易耗尽数据的长度。

尝试 -

$(".c").on('blur', function(){
    $.post( "php/create_pdf_preview.php", $( "#workForm" ).serialize())
    .done(function( data ) {
        alert( "Data posted: " + data );

        //print here 
        $("#preview").html(data);
    });
});

你可以在这里找到它 - http://api.jquery.com/jquery.post/

或者您可以使用更详细的 -

$(".c").on('blur', function(){
  $.ajax({
      type: "POST",
      url: "php/create_pdf_preview.php",
      data: $( "#workForm" ).serialize(),
      success: function(data){
          alert( "Data posted: " + data );

          //print here 
          $("#preview").html(data);
      },
      dataType: 'html' // for json response or 'html' for html response
     });
});

你也可以在这里找到它 - http://api.jquery.com/jQuery.ajax/

如何在不重新加载的情况下提交表单和显示结果？

1 个答案: