抑制和添加ajax调用的参数

Suppressing and adding parameters for ajax call

本文关键字：调用 参数 ajax 添加      更新时间：2023-09-26

我正在尝试为两个单独的单击事件进行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>

制作一些像这样的

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>

您也可以用最少的代码行以其他方式做同样的事情，您可以在单击事件时调用ajax并根据触发单击事件的元素传递数据。这样的:

$('.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>

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

你应该这样做:

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对象传递给ajax方法的data参数

我只是想添加一些东西。我经常将value隐藏在按钮标签的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>

更优化、更简洁的版本-

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>
相关文章：