时间戳

首页 > 解决方案 > 如何使我的 JavaScript 代码更具动态性和可扩展性

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

问题描述

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

这是代码

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

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

标签： javascriptjquery

解决方案

创建一个函数来完成所有繁重的工作

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

推荐阅读