将参数传递给JQuery函数

Question

我正在用一个循环来创建HTML，其中有一个名为“Action”的列。该列是一个超链接，当用户单击时会调用JavaScript函数并传递参数...

示例：

<a href="#" OnClick="DoAction(1,'Jose');" > Click </a>
<a href="#" OnClick="DoAction(2,'Juan');" > Click </a>
<a href="#" OnClick="DoAction(3,'Pedro');" > Click </a>
...
<a href="#" OnClick="DoAction(n,'xxx');" > Click </a>

我希望那个函数调用一个Ajax jQuery函数并传递正确的参数。

有什么帮助吗？

- jmpena

Answer 1

使用POST

function DoAction( id, name )
{
    $.ajax({
         type: "POST",
         url: "someurl.php",
         data: "id=" + id + "&name=" + name,
         success: function(msg){
                     alert( "Data Saved: " + msg );
                  }
    });
}

使用GET方法

function DoAction( id, name )
{
     $.ajax({
          type: "GET",
          url: "someurl.php",
          data: "id=" + id + "&name=" + name,
          success: function(msg){
                     alert( "Data Saved: " + msg );
                   }
     });
}

编辑:

如果未启用JavaScript，也许更好的一种方式是使用GET来生成href的URL，然后使用单击处理器通过ajax调用该URL。

<a href="/someurl.php?id=1&name=Jose" class="ajax-link"> Click </a>
<a href="/someurl.php?id=2&name=Juan" class="ajax-link"> Click </a>
<a href="/someurl.php?id=3&name=Pedro" class="ajax-link"> Click </a>
...
<a href="/someurl.php?id=n&name=xxx" class="ajax-link"> Click </a>

<script type="text/javascript">
$(function() {
   $('.ajax-link').click( function() {
         $.get( $(this).attr('href'), function(msg) {
              alert( "Data Saved: " + msg );
         });
         return false; // don't follow the link!
   });
});
</script>

- tvanfosson

---

你不需要改变任何东西来使用GET，只需将TYPE更改为GET即可。查询字符串将自动构建。 - Pim Jager

如果您想将多个参数传递到URL，请使用data，例如： data:{id:'123' , name:"MyName"} 其中123是id参数的值， myName是name参数的值， 这里的值可以是字符串或变量，具体取决于要传递的值。这只是一个简单的技巧，可以避免字符串连接。 - frictionlesspulley

这个被接受的答案对我来说看起来非常好，但我不禁想知道，如果使用jQuery而不是直接在<a>标签中进行onClick绑定，会是什么样子？我相信jQuery也可以处理事件绑定。 - Marcus

@Marcus - 我实际上会生成URL作为href属性。然后我会添加一个点击处理程序，从锚点的href元素中获取URL并通过ajax进行发布/获取，从点击处理程序返回false。我可以将其作为一种替代方案添加。 - tvanfosson

@tvanfosson 我尝试了你发布的点击链接获取href的替代方法（我进行了复制/粘贴），但出于某种原因，这一行 --> $.get( $(this).attr('href') 什么也没发生（没有警报），有什么想法吗？ - Patricio Carvajal H.

Answer 2

如果你想进行一个ajax调用或者简单的javascript函数，请不要忘记在函数结束时添加return false语句。

示例如下：

function DoAction(id, name) 
{ 
    // your code
    return false;
}

- tanathos

Answer 3

尝试像这样做： #vote_links a 将捕获所有投票链接 div id 内的 ids...

<script type="text/javascript">

  jQuery(document).ready(function() {
  jQuery(\'#vote_links a\').click(function() {// alert(\'vote clicked\');
    var det = jQuery(this).get(0).id.split("-");// alert(jQuery(this).get(0).id);
    var votes_id = det[0];


   $("#about-button").css({
    opacity: 0.3
   });
   $("#contact-button").css({
    opacity: 0.3
   });

   $("#page-wrap div.button").click(function(){

- Roko Mise

Answer 4

你是想把参数传递给另一个页面还是仅传递给函数？

如果只是传递给函数，你不需要添加tvanfosson提到的$.ajax()方法。只需替换函数内容即可。 例如：

function DoAction (id, name ) {
    // ...
    // do anything you want here
    alert ("id: "+id+" - name: "+name);
    //...
}

这将返回一个带有id和name值的警告框。

- Leandro Ardissone

Answer 5

<script type="text/javascript" src="jquery.js">
</script>

 <script type="text/javascript">

  function omtCallFromAjax(urlVariable)
{ 
    alert("omt:"+urlVariable);
     $("#omtDiv").load("omtt.php?"+urlVariable);
}

 </script>

你可以试试，这个对我有效。

- Dhiral Pandya