Javascript 抑制和添加ajax调用的参数_Javascript_Jquery

Javascript 抑制和添加ajax调用的参数

javascript jquery

Javascript 抑制和添加ajax调用的参数,javascript,jquery,Javascript,Jquery,我正在尝试对两个单独的单击事件进行ajax调用。不同之处在于，对于第二个click事件，变量testOne不应该是调用的一部分，而是应该有一个新变量。我应该如何处理这个问题 var varOne = ''; var varTwo = ''; var varThree = ''; function testAjax(){ $.ajax({ type: "POST", dataType: 'html', url: "http://somebl

我正在尝试对两个单独的单击事件进行ajax调用。不同之处在于，对于第二个click事件，变量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>

var varOne=''；
var varTwo=''；
var varThree=''；
函数testAjax（）{
$.ajax({
类型：“POST”，
数据类型：“html”，
url:“http://someblabla.php",
数据：{
测试一：瓦隆，
测试二：瓦隆
}
}).完成（功能（数据）{
$（'.result'）.html（数据）；
});
}
$（'.clickOne'）。单击（函数（）{
varOne='xyz123'；
varTwo='123hbz'；
testAjax（）；
});   
$（'.clickTwo'）。单击（函数（）{
//varOne='xyz123'；//我不需要这个来点击
varTwo='123hbz'；
varThree='kjsddfag'；//这将被添加
testAjax（）；
});

您应该这样做：

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').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>

函数testAjax（数据）{
$.ajax({
类型：“POST”，
数据类型：“html”，
url:“http://someblabla.php",
数据：数据
}).完成（功能（数据）{
$（'.result'）.html（数据）；
});
}
$（'.clickOne'）。单击（函数（）{
var数据{
瓦隆='xyz123'，
varTwo='123hbz'
}
testAjax（数据）；
});   
$（'.clickTwo'）。单击（函数（）{
风险值数据={
varTwo='123hbz'，
varThree='kjsddfag'
}
testAjax（数据）；
});

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

您可以将任何JavaScript对象传递给

ajax

方法的

data

参数。

您应该这样做：

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').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>

函数testAjax（数据）{
$.ajax({
类型：“POST”，
数据类型：“html”，
url:“http://someblabla.php",
数据：数据
}).完成（功能（数据）{
$（'.result'）.html（数据）；
});
}
$（'.clickOne'）。单击（函数（）{
var数据{
瓦隆='xyz123'，
varTwo='123hbz'
}
testAjax（数据）；
});   
$（'.clickTwo'）。单击（函数（）{
风险值数据={
varTwo='123hbz'，
varThree='kjsddfag'
}
testAjax（数据）；
});

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

您可以将任何JavaScript对象传递给

ajax

方法的

data

参数

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>

函数testAjax（数据）{
$.ajax({
类型：“POST”，
数据类型：“html”，
url:“http://someblabla.php",
数据：数据，
}).完成（功能（数据）{
$（'.result'）.html（数据）；
});
}
$（'.clickOne'）。单击（函数（）{
变量数据={
瓦隆：“xyz123”，
varTwo:'123hbz'，
}
testAjax（数据）；
});   
$（'.clickTwo'）。单击（函数（）{
变量数据={
varThree:'kjsddfag'，
varTwo:'123hbz'，
}
testAjax（数据）；
});

做一些这样的

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>

函数testAjax（数据）{
$.ajax({
类型：“POST”，
数据类型：“html”，
url:“http://someblabla.php",
数据：数据，
}).完成（功能（数据）{
$（'.result'）.html（数据）；
});
}
$（'.clickOne'）。单击（函数（）{
变量数据={
瓦隆：“xyz123”，
varTwo:'123hbz'，
}
testAjax（数据）；
});   
$（'.clickTwo'）。单击（函数（）{
变量数据={
varThree:'kjsddfag'，
varTwo:'123hbz'，
}
testAjax（数据）；
});

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

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').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>

$（'.ajax'）。单击（函数（e）{
if（$（this）.hasClass（'clickOne'））{
var data={varOne:'xyz123'；varTwo:'123hbz'；}
}否则{
var data={varThree:'kjsddfag'；varTwo:'123hbz'；}
}
$.ajax({
类型：“POST”，
数据类型：“json”，
url:“http://someblabla.php",
数据：数据，
}).完成（功能（数据）{
$（'.result'）.html（数据）；
});
e、 预防默认值（）；
});

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

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

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').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>

$（'.ajax'）。单击（函数（e）{
if（$（this）.hasClass（'clickOne'））{
var data={varOne:'xyz123'；varTwo:'123hbz'；}
}否则{
var data={varThree:'kjsddfag'；varTwo:'123hbz'；}
}
$.ajax({
类型：“POST”，
数据类型：“json”，
url:“http://someblabla.php",
数据：数据，
}).完成（功能（数据）{
$（'.result'）.html（数据）；
});
e、 预防默认值（）；
});

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

我只是想添加一些内容。我经常将值隐藏在按钮标记的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:

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

更优化、更干净的版本-

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>

var varTwo='junk1'
var varOne='junk2'
var varThree='junk3'
函数testAjax（数据）{
$.ajax({
类型：“POST”，
数据类型：“html”，
url:“http://someblabla.php",
数据：数据，
}).完成（功能（数据）{
$（'.result'）.html（数据）；
});
}
$（'.ajaxClick'）。单击（函数（）{
变量数据={}；
if（this.classList.contains（'clickOne'））{
data.varOne=varOne；
data.varTwo=varTwo；
}否则{
data.varThree=varT