Question

我正在构建一个应用程序，并试图将数据保存到我的数据库中。我有很多表格，但是它们都发送到同一个端点，我的代码看起来又长又无聊，我觉得将来很难维护，所以我可以缩短它们的方式，例如创建一个可以如果我想向我的应用程序添加更多表单，以使其动态且可扩展，则会自动提交表单。

这是代码

    $('.stepNextBtn1').click(function(){  
    $('#FuielsImg').fadeIn()      
    $.ajax({
        url: '/nexpost',
        type: 'POST',
        data: {
            '_token': csrf,
            'value': $('.AuthenticationKe').val(),
            'key': 'AuthenticationKey'
        },
        dataType: 'JSON',
        success: function( data ) {
            $('#FuielsImg').fadeOut()      
            if(data.success){
                $('.ShowAutCode').fadeOut()
                $('.AuthenticationKe').val('')
                $('.stepfield1').slideUp('slow')
                $('.stepfield2').slideDown('slow')
            }  else{
                $('.ShowAutCode').fadeIn()
            }      
        } 
    })
})
$('.stepNextBtn2').click(function(){
    $('#FuielsImg').fadeIn()      
    $.ajax({
        url: '/nexpost',
        type: 'POST',
        data: {
            '_token': csrf,
            'value': $('.COTcode').val(),
            'key': 'COTcode'
        },
        dataType: 'JSON',
        success: function( data1 ) {
            $('#FuielsImg').fadeOut()
            if(data1.success){
                $('.ShowCotCode').fadeOut()
                $('.COTcode').val('')
                $('.stepfield2').slideUp('slow')
                $('.stepfield3').slideDown('slow')
            }  else{
                $('.ShowCotCode').fadeIn()
            }      
        } 
    })
})
$('.stepNextBtn3').click(function(){
    $('#FuielsImg').fadeIn()      
    $.ajax({
        url: '/nexpost',
        type: 'POST',
        data: {
            '_token': csrf,
            'value': $('.TAXcode').val(),
            'key': 'TAXcode'
        },
        dataType: 'JSON',
        success: function( data2 ) {
            $('#FuielsImg').fadeOut()
            if(data2.success){
                $('.ShowTaxCode').fadeOut()
                $('.TAXcode').val('')
                $('.stepfield3').slideUp('slow')
                $('.stepfield4').slideDown('slow')
            }  else{
                $('.ShowTaxCode').fadeIn()
            }      
        } 
    }) 
})

谢谢，这对我来说真的很重要

Answer 1

创建一个函数来完成所有繁重的任务

function clickHandler(p1, p2, p3, p4, p5) {
    return function() {
        $('#FuielsImg').fadeIn()
        $.ajax({
            url: '/nexpost',
            type: 'POST',
            data: {
                '_token': csrf,
                'value': $(p1).val(),
                'key': p2
            },
            dataType: 'JSON',
            success: function(data) {
                $('#FuielsImg').fadeOut()
                if (data.success) {
                    $(p3).fadeOut()
                    $(p1).val('')
                    $(p4).slideUp('slow')
                    $(p5).slideDown('slow')
                } else {
                    $(p3).fadeIn()
                }
            }
        });
    };
}
$('.stepNextBtn1').click(clickHandler('.AuthenticationKe', 'AuthenticationKey', '.ShowAutCode', '.stepfield1', '.stepfield2'))

Answer 2

我对Jquery不熟悉，但是从您的代码来看，由于要传递给ajax函数的是一个对象，我认为您可以创建一个switch语句，根据所单击按钮的类名来适当地设置对象

switch(event.target.classname) {
   case '.stepNextBtn1':
     obj = {...};
     break;
   case 'stepNextBtn2':
     obj = {...};
     break;
   case 'stepNextBtn3':
     obj = {...};
     break;
   default:
     break
}

然后您可以将代码简化为类似

 $(event.target.classname).click(function(){  
 $('#FuielsImg').fadeIn()
 $.ajax(obj)

Answer 3

一些基本的软件工程原理可能会在这里有所帮助！

保持代码干燥。您要进行三次相同的AJAX调用。不要重复自己，只做一个函数来处理AJAX调用，然后传递相关数据来处理AJAX调用和UI交互。

let ajaxObj = {
    fieldsToClear: ['AuthenticationKe','COTcode','TAXcode'],
    slideUpFields: ['stepfield1','stepfield2','stepfield3']
}

function makeAjaxCall(ajaxData) {
    // Do ajax stuff here

    // then your UI interactions
    ajaxData.fieldsToClear.forEach(elem => {
        $(elem).val('');
    });

    ajaxData.slideUpFields.forEach(elem => {
        $(elem).slideUp('slow');
    })

    return(value);
}

如何使我的JavaScript代码更具动态性和可扩展性

3 个答案: