Question

在我的博客上，我有很多包含代码段的<pre>块。

我想要做的是在页面上的所有.click()元素中添加<pre>处理程序，将其内容发送到另一个页面 - 让我们称之为viewcode.php - 通过POST。

我知道如何使用$.ajax向此页面发送信息，我只是不确定如何发送信息和导航到该页面。

这个想法是访问者可以点击<pre>，它会导航到另一个包含代码的页面，以便于阅读和轻松复制/粘贴。

我觉得解决方案很简单，可能很明显，我只是想不到它。

Answer 1

不确定我会以这种方式处理它，可能我只是弹出一个包含代码的对话而不是离开页面，但你可以通过使用javascript构建表单然后在该表单上触发提交而不是使用来处理AJAX。

使用jQuery UI对话框：

 $('pre').on('click', function() {
      $('<div title="Code Preview"><p>' + $(this).text() + '</p></div>').dialog({
          ... set up dialog parameters ...
      });
 });

构建表单

 $('pre').on('click', function() {
      var text = $(this).text();
      $('<form class="hidden-form" action="something.php" method="post" style="display: none;"><textarea name="code"></textarea></form>')
          .appendTo('body');
      $('[name="code"]').val(text);
      $('.hidden-form').submit();
 });

Answer 2

您可以使用隐藏的<form>元素。然后设置onclick()的{{1}}属性，将值从<pre>复制到表单。（可选）您可以设置<pre>属性以选择要将信息发布到的页面。最后，提交该表格。

我知道它不优雅，但它会起作用。

Answer 3

如果您的代码段存储在数据库或文件中的某个位置，我建议您只需将代码段链接到一个页面，您可以根据某个标识符获取该代码段。

如果片段仅包含在您的html中，并且您只想以更干净的方式显示它们，则不需要任何ajax发布。您可能想要使用悬停div或jquery插件，弹出并显示从pre元素获得的更清晰的代码，如：

$('pre').click(function() {
   var code = $(this).html(); //this is the pre contents you  want to send
   $('#hoverDiv').html(code).show();
});

Answer 4

是的，您必须创建一个表单并提交。您可以使用ajax帖子/获取来执行各种操作，但导航到帖子结果的唯一方法是通过实际的表单发布。这是简洁版本：

$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();

我的代码执行此操作：

// Navigate to Post Response, Convert first form values to query string params:
// Put the things that are too long (could exceed query string limit) into post values
var form = $('#myForm');
var actionWithoutQueryString = form[0].action.split("?")[0];
var action = actionWithoutQueryString + '?' + $.param(form.serializeArray());
var html = myArray.map(function(v, i) { return "<input name='MyList[" + i + "]' value='" + v + "'/>"; }).join("\n");
$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();

如何发送POST数据并使用JQuery导航？

4 个答案: