Question

我正在尝试为两个单独的点击事件进行ajax调用。不同之处在于第二次单击事件变量testOne不应该是调用的一部分，而是会有一个新变量。我该怎么做呢？

var varOne = '';
var varTwo = '';
var varThree = '';

function testAjax(){
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "http://someblabla.php",
        data: {
            testOne: varOne,
            testTwo: varOne
        }
    }).done(function(data) {
        $('.result').html(data);
    });
}

$('.clickOne').click(function(){
    varOne = 'xyz123';
    varTwo = '123hbz';
    testAjax();
});   

$('.clickTwo').click(function(){
    //varOne = 'xyz123'; // I dont need this for this click
    varTwo = '123hbz';
    varThree = 'kjsddfag'; // this gets added
    testAjax();
});

<div class="clickOne"></div>
<div class="clickTwo"></div>

Answer 1

做一些这样的

function testAjax(data){
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "http://someblabla.php",
        data: data,
    }).done(function(data) {
        $('.result').html(data);
    });
}

$('.clickOne').click(function(){
    var data= { 
    varOne: 'xyz123',
    varTwo: '123hbz',
}
    testAjax(data);
});   

$('.clickTwo').click(function(){
    var data= { 
    varThree : 'kjsddfag',
    varTwo: '123hbz',
}
    testAjax(data);
});

<div class="clickOne"></div>
<div class="clickTwo"></div>

Answer 2

您也可以使用最少的代码行以其他方式执行相同操作，您可以在click事件上调用ajax并根据触发click事件的元素传递数据。像这样：

$('.ajax').click(function(e){
 if($(this).hasClass('clickOne')){
  var data= {     varOne: 'xyz123';    varTwo: '123hbz'; }
 }else{
  var data= {     varThree : 'kjsddfag';    varTwo: '123hbz'; } 
 }
 $.ajax({
  type: "POST",
  dataType: 'json',
  url: "http://someblabla.php",
  data: data,
 }).done(function(data) {
  $('.result').html(data);
 });
 e.preventDefault();
});
<div class="ajax clickOne"></div>
<div class="ajax clickTwo"></div>

通过这种方式，您可以为不同的数据变量添加尽可能多的条件。

Answer 3

你应该这样做：

function testAjax(data){
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "http://someblabla.php",
        data: data
    }).done(function(data) {
        $('.result').html(data);
    });
}

$('.clickOne').click(function(){
    var data {
        varOne = 'xyz123',
        varTwo = '123hbz'
    }
    testAjax(data);
});   

$('.clickTwo').click(function(){
    var data = {
        varTwo = '123hbz',
        varThree = 'kjsddfag'
     }
    testAjax(data);
});

<div class="clickOne"></div>
<div class="clickTwo"></div>

通过这种方式，您可以绝对控制将哪些变量添加到哪个ajax调用。你不应该使用全局变量，除非你真的需要全局变量，这似乎并非如此。

您可以将任何JavaScript对象传递给data方法的ajax参数。

Answer 4

我只想添加一些东西。我经常在按钮标签的value属性中隐藏值以产生类似这样的东西。

我当然没有能够对此进行测试，但我认为值得一提。

jquery的：

var fields = '';

function testAjax(){
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "http://someblabla.php",
        data: fields
    }).done(function(data) {
            $('.result').html(data);
        });
}

$('#btn').click(function(){
    var varCount = 0;
    var vars = $(this).val().split('|');
    $.each( vars, function( key, value ) {
        varCount++;
        fields = fields + 'var' + varCount + '=' + value + '&';
    });
    fields = fields.slice(0,-1);
    $(this).val('123hbz|kjsddfag');
    testAjax();
});

HTML：

<button id="btn" value="xyz123|123hbz"></button>

Answer 5

更优化和更清洁的版本 -

var varTwo='junk1'
var varOne='junk2'
var varThree='junk3'

function testAjax(data){
    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "http://someblabla.php",
        data: data,
    }).done(function(data) {
        $('.result').html(data);
    });
}

$('.ajaxClick').click(function(){
    var data={};
    if(this.classList.contains('clickOne')){
        data.varOne=varOne;
        data.varTwo=varTwo;
    }else{
        data.varThree=varThree;
        data.varTwo=varTwo;
    }
    testAjax(data);

});   
<div class="ajaxClick clickOne"></div>
<div class="ajaxClick clickTwo"></div>

抑制和添加ajax调用的参数

5 个答案: