如何做POST和GET请求同一个按钮jQuery

Question

I have been stuck on this same problem now for 2 weeks with 10-15 hours a day.

I am using dynamic buttons that append more buttons which work like tabs on my view which are dynamic.

I can only use 1 form for this so the dynamic buttons are being used to know which model ID to load.

I have to use only 1 form Simple jquery is this:

$("#copy-link").click(function (e) {
    e.preventDefault();

    var num_tabs = $("div#tabSequence ul li").length + 1;
    $("div#tabSequence ul").append(
        "<li class='tab-button'><a data-toggle='tab' id='link" + num_tabs + "' href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
    );

    var data =  $('#campaign-form').serialize();



      $.ajax(
            {
                dataType: 'html',
                type: 'POST',
                url: "campaigns/sequencesave",
                data: data,
                success: function(response){
                    var campaignId = response;
                    var test2 = document.getElementById("link" + num_tabs);
                    console.log(test2);
                    test2.setAttribute("data-campaign", campaignId);
                }

            }
    )
});

Is there a way I can POST form data and also load form content for the Tab button clicked?

$("body").on("click", ".nav-tabs li a", function() {
        var data =  $('#campaign-form').serialize();


        $.ajax(
            {
                dataType: 'html',
                type: 'POST',
                url: "campaigns/sequenceupdate",
                data: { 'campaign_uid' : $(this).attr('data-campaign'), csrf_token: csrfTokenValue },

            }
        )
    })

^^ that same button clicked has to save what is currently on the view and then load contents for the button clicked. I am appending an ID of the Model needed to the button when user clicks #copy-link and saving it automatically

Answer 1

Im not a jQuery wiz but you can do this with straight up javascript in conjunction with Jquery.

function postInfo(event){
    httpRequest = new XMLHttpRequest();
    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = results;
    httpRequest.open('POST', 'ENTER YOUR URL HERE');
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('serverpin='+ServerPIN+'&restuarantid='+RestaurantID); //<-these are the variables you are posting
  }

function results(){
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        // WHATEVER YOU WANT TO MAKE IT DO IF THE REQUEST IS SUCCESSFUL
      } else {
        alert('There was a problem with the request.');
      }
    }
  }

And then to invoke it I use an event listener like this

document.getElementById('WHATEVERIDMATTERS').addEventListener('click',postOrder);