如何使用javascript在页面之间发送值？

I am currently using a javascript code to make an entire row in my table clickable. Once the row is clicked a function is ran, I am wondering what I can use to redirect to a PHP page and preferably send a post variable along with it. My guess is AJAX but I am not sure how or if it would work.

我目前正在使用javascript代码使我的表中的整行可以点击。一旦单击该行,就会运行一个函数,我想知道我可以使用什么来重定向到PHP页面,并且最好发送一个post变量。我的猜测是AJAX,但我不确定它是如何工作的。

My Javascript Function:

我的Javascript函数:

  function DoNav(theUrl)
  {
  document.location.href = theUrl;
  }

My HTML:

<tr onclick="DoNav('myphpscript.php');">

I have access to jQuery so that is also an option. Any help is appreciated, Thanks!

我可以访问jQuery,所以这也是一个选项。任何帮助表示赞赏,谢谢!

4 个解决方案

#1

If the amount of data is not ridiculously large, use a query string...

如果数据量不是很大,请使用查询字符串...

Or if you need a natural HTTP post, you can programmatically submit the form with Javascript...

或者,如果您需要自然的HTTP帖子,您可以使用Javascript以编程方式提交表单...

onclick="document.forms[0].submit();"

#2

If you need to POST the data (not use GET), One easy option is to create a form element on the fly, attach input elements with the values you need and submit it. You can do that like so if you use jQuery:

如果您需要POST数据(不使用GET),一个简单的选择是动态创建表单元素,使用您需要的值附加输入元素并提交它。如果你使用jQuery,你可以这样做:

$(function() { 
    $('tr').click(function() {
        var mail_id = /* get the mail id of this row... not sure where since I dont' have the HTML */
        $('body').append('<form method="post" action="myphpscript.php" id="donavform" style="display:none;"></form>');
        $('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');
        $('#donavform').submit();
    });
});

~~Hope that makes sense. If not, let me know!~~ It's, okay...

希望有道理。如果没有,请告诉我!没关系...

Explanation: The very first line is a jQuery shortcut way of saying "when the document is done loading..." So, when the page is done loading, I'm going to attach an event listener to all elements in the document. When one of those elements is clicked, we can then extract the mail id (and whatever else you need) that is in relation to that particular table row. So, if you had HTML like this:

说明:第一行是jQuery快捷方式,表示“文档加载完成后......”因此,当页面加载完成后,我将向文档中的所有元素附加一个事件监听器。当单击其中一个元素时,我们可以提取与该特定表行相关的邮件ID(以及您需要的任何其他内容)。所以,如果你有像这样的HTML:

<!-- 8435 is the mail ID in this example. -->
<tr id="row3">8435</tr>

Then we could extract the mail_id variable like so:

然后我们可以像这样提取mail_id变量:

var mail_id = $(this).html();

Now, we are going to attach a hidden form element to the end of the body of the HTML (it doesn't really matter where we put it since it is hidden... so, the end is fine). In this form element, we set the method to POST and the action to whatever php file you need to POST to. I also set an ID so it's easily referred to in the next step.

现在,我们将隐藏的表单元素附加到HTML正文的末尾(因为它隐藏了所以我们把它放在哪里并不重要...所以,结束很好)。在这个表单元素中,我们将方法设置为POST,并将操作设置为POST所需的任何php文件。我还设置了一个ID,以便在下一步中轻松引用。

I'm now going to select the newly-created form element using its ID and I'm going to append a new hidden input element to it with the appropriate name value pair.

我现在要使用它的ID选择新创建的表单元素,并且我将使用适当的名称值对添加一个新的隐藏输入元素。

$('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');

Finally, I'm going to use the ~~jQuery~~ JavaScript submit method to trigger the submit event on the form. This is basically equivalent to pressing the 'submit' button on a normal form.

最后,我将使用jQuery JavaScript submit方法触发表单上的submit事件。这基本上相当于按正常表格上的“提交”按钮。

Try it out, it should work flawlessly.

尝试一下,它应该完美无缺。

#3

If you're going to a new page, just submit the form as usual. Put the data in form fields (hidden if required). No need to Ajax, jQuery or any other magic unless you want to stay on the same page and post in the background.

如果您要转到新页面,只需像往常一样提交表单。将数据放在表单域中(如果需要,隐藏)。除非你想留在同一页面并在后台发布,否则不需要Ajax,jQuery或任何其他魔法。

#4

You could send the data along in a cookie. There's a nice jQuery plugin that helps with setting cookies in the jQuery namespace.

您可以在cookie中发送数据。有一个很好的jQuery插件,可以帮助在jQuery命名空间中设置cookie。

http://plugins.jquery.com/project/cookie

#1