Form.submit'in yanıtını nasıl yakalayabilirim

Takip koduna sahibim:

<script type="text/javascript">
        function SubmitForm()
        {

            form1.submit();
        }

        function ShowResponse()
        {

        }
</script>
.
.
.
<div>
    <a href="#" onclick="SubmitForm();">Click</a>
</div>

form1.submit? Nin html yanıtını yakalamak istiyorum ? Bunu nasıl yaparım? Form1.submit yöntemine herhangi bir geri arama işlevi kaydedebilir miyim?

Bunu basit javascript ile kolayca yapamazsınız. Bir form gönderdiğinizde, form girişleri sunucuya gönderilir ve sayfanız yenilenir - veriler sunucu tarafında işlenir. Yani submit()işlev aslında hiçbir şey döndürmez, sadece form verilerini sunucuya gönderir.

Yanıtı Javascript'te (sayfa yenilenmeden) gerçekten almak istiyorsanız, AJAX kullanmanız gerekir ve AJAX'ı kullanmaktan bahsetmeye başladığınızda bir kitaplık kullanmanız gerekir . jQuery , açık ara en popüler ve benim kişisel favorim. Form adında jQuery için tam istediğiniz gibi görünen harika bir eklenti var .

JQuery'yi ve bu eklentiyi şu şekilde kullanacaksınız:

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;

Bir Ajax alternatif görünmez bir ayarlamaktır <iframe>formunuzun hedef olarak ve bunun içeriğini okumak <iframe>onun içinde onloadişleyicisi. Ama Ajax varken neden zahmet edelim?

Not: Bazı cevaplar bunu Ajax olmadan başarmanın imkansız olduğunu iddia ettiği için bu alternatiften bahsetmek istedim .

JQuery olmayan vanilya Javascript yolu, 12me21'in yorumundan alınmıştır:

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);

İçin POSTvarsayılan içerik türü, yukarıdaki ön bilgide gönderdiklerimizle eşleşen "application / x-www-form-urlencoded" dir. "Başka şeyler" göndermek veya ince ayar yapmak istiyorsanız , bazı ayrıntılar için buraya bakın.

Bunu bu şekilde yapıyorum ve işe yarıyor.

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});

Gelecekteki internet araştırıcıları:

Yeni tarayıcılar için (2018 itibariyle: Chrome, Firefox, Safari, Opera, Edge ve çoğu mobil tarayıcı, ancak IE değil), fetcheşzamansız ağ çağrılarını ( XMLHttpRequesteskiden ihtiyaç duyduğumuz veya jQuery'lere $.ajax) basitleştiren standart bir API'dir .

İşte geleneksel bir biçim:

<form id="myFormId" action="/api/process/form" method="post">
    <!-- form fields here -->
    <button type="submit">SubmitAction</button>
</form>

Yukarıdaki gibi bir form size verilirse (veya onu anlamsal html olduğu için oluşturduysanız), fetchkodu aşağıdaki gibi bir olay dinleyicisine sarabilirsiniz :

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((resp) => {
        return resp.json(); // or resp.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});

(Veya, orijinal poster gibi, onu bir gönderme olayı olmadan manuel olarak çağırmak istiyorsanız, fetchkodu oraya koyun ve formkullanmak yerine öğeye bir referans verin event.target.)

Dokümanlar:

Getirme: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Diğer: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript 2018'deki bu sayfada (henüz) getirmeden bahsedilmiyor. Ancak target = "myIFrame" hilesinin kullanımdan kaldırıldığından bahsediyor. Ayrıca 'submit' olayı için bir form.addEventListener örneğine de sahiptir.

Submit () işlevinin ne yaptığını anladığınızdan emin değilim ...

Bunu yaptığınızda form1.submit();formu bilgileri web sunucusu gönderilir.

Web Sunucusu yapması gerekeni yapacak ve müşteriye yepyeni bir web sayfası (genellikle bir şeyin değiştiği aynı sayfa) geri gönderecektir.

Bu nedenle, form.submit () eyleminin geri dönüşünü "yakalamanın" hiçbir yolu yoktur.

Geri arama yok. Bir bağlantıyı izlemek gibi.

Sunucu yanıtını yakalamak istiyorsanız AJAX kullanın veya bir Iframe'e gönderin ve iframe onload()olayından sonra orada görünenleri alın .

Sen edebilirsiniz event.preventDefault()senin göndermek düğmesi için tıklatma işleyicisi HTML form varsayılan sağlamak için submit(sayfa canlandırıcı ne açar olan) olay yangın değil.

Başka bir alternatif hackier formu işaretlemeyi kullanmak olacaktır: Bu kullanımı var <form>ve type="submit"burada istenen davranışın şekilde elde ettiğini; çünkü bunlar sonuçta sayfayı yenileyen tıklama olaylarına yol açar.

Hala kullanmak istiyorsanız <form>ve özel işleyicileri tıklayın yazmak istemiyorum, sen jQuery'nin kullanabilirsiniz ajaxiçin söz yöntemlerini açığa uzakta sizin için tüm sorunu soyutlar yöntemi success, errorvb

Özetlemek gerekirse, sorununuzu şunlardan biriyle çözebilirsiniz:

• kullanım işlevinde varsayılan davranışı önlemek event.preventDefault()

• varsayılan davranışa sahip olmayan öğeler kullanmak (ör. <form> )

• jQuery kullanarak ajax

(Bu sorunun 2008'den geldiğini yeni fark ettim, neden feed'imde göründüğünden emin değilim; her halükarda, umarım bu net bir cevaptır)

Bu problem için benim kodum:

<form id="formoid" action="./demoText.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $( this ), url = $form.attr( 'action' );

  /* Send the data using post with element id name and name2*/
  var posting = $.post( url, { name: $('#name').val()} );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});
</script>

Chrome kullanarak bir AJAX isteğinin çıktısını yakalamak istemeniz durumunda şu basit adımları uygulayabilirsiniz:

1. Programcılar araç kutusunu açın
2. Konsola ve içindeki her yere gidin
3. Görünen menüde, "XMXHTTPRequest Günlük Kaydını Etkinleştir" seçeneğini tıklayın.
4. Bunu yaptıktan sonra her AJAX talebinde bulunduğunuzda, konsolunuzda "XHR yüklemeyi tamamladı: http: // ......" ile başlayan bir mesaj görünecektir.
5. Görünen bağlantıya tıkladığınızda, üstbilgileri ve yanıtın içeriğini görebileceğiniz "Kaynaklar sekmesi" açılır!

    $.ajax({
        url: "/users/login/",    //give your url here
        type: 'POST',
        dataType: "json",
        data: logindata,
        success: function ( data ){
        //  alert(data);    do your stuff
        },
        error: function ( data ){
        //  alert(data);    do your stuff
        }
    });

@Rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ) tarafından verilen yanıta dayanarak , form gönderme hatalarını ve başarısını ele alıyorum:

    $('#formName').on('submit', function(event) {
        event.preventDefault(); // or return false, your choice
        $.ajax({
            url: $(this).attr('action'),
            type: 'post',
            data: $(this).serialize(),
            success: function(data, textStatus, jqXHR) {
                // if success, HTML response is expected, so replace current
                if(textStatus === 'success') {
                    // https://stackoverflow.com/a/1236378/4946681
                    var newDoc = document.open('text/html', 'replace');
                    newDoc.write(data);
                    newDoc.close();
                }
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            if(jqXHR.status == 0 || jqXHR == 302) {
                alert('Your session has ended due to inactivity after 10 minutes.\nPlease refresh this page, or close this window and log back in to system.');
            } else {
                alert('Unknown error returned while saving' + (typeof errorThrown == 'string' && errorThrown.trim().length > 0 ? ':\n' + errorThrown : ''));
            }
        });
    });

Yararlanıyorum thisMantığımın yeniden kullanılabilir HTML'nin başarılı olmasını bekliyorum, bu yüzden onu oluşturuyorum ve mevcut sayfayı değiştiriyorum ve benim durumumda oturum zaman aşımına uğrarsa giriş sayfasına bir yönlendirme bekliyorum, bu yüzden Sayfanın durumunu korumak için bu yönlendirmeyi durduruyorum.

Artık kullanıcılar başka bir sekme aracılığıyla oturum açabilir ve göndermeyi tekrar deneyebilir.

AJAX kullanıyor olmanız gerekir. Formun gönderilmesi genellikle tarayıcının yeni bir sayfa yüklemesine neden olur.

Bunu javascript ve AJAX teknolojisini kullanarak yapabilirsiniz. Jquery'ye bir göz atın ve bu forma eklenti yapın . Form.submit için bir geri arama kaydetmek için yalnızca iki js dosyası eklemeniz gerekir.

Bunu jQuery ve ajax()yöntemi kullanarak gerçekleştirebilirsiniz :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function submitform() {
      $.ajax({
        headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
        },
        type: "POST",
        url : "/hello.hello",
        dataType : "json",
        data : JSON.stringify({"hello_name": "hello"}),
        error: function () {
          alert('loading Ajax failure');
        },
    	onFailure: function () {
          alert('Ajax Failure');
    	},
    	statusCode: {
          404: function() {
          alert("missing info");
          }   
    	},
        success : function (response) {
          alert("The server says: " + JSON.stringify(response));
        }
      })
      .done(function( data ) {
        $("#result").text(data['hello']);
      });
};</script>

 $(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        $.ajax({
            url : "<wiki:action path='/your struts action'/>",//path of url where u want to submit form
            type : "POST",
            data : $(this).serialize(),
            success : function(data) {
                var treeMenuFrame = parent.frames['wikiMenu'];
                if (treeMenuFrame) {
                    treeMenuFrame.location.href = treeMenuFrame.location.href;
                }
                var contentFrame = parent.frames['wikiContent'];
                contentFrame.document.open();
                contentFrame.document.write(data);
                contentFrame.document.close();
            }
        });
    });
});

blockquote

ilk olarak bu kullanım içinde $ (document) .ready (function ()) kullanın ('formid'). submit (function (event)) ve ardından ajax form gönderimini $ .ajax ({,,, ,}); u parametresini gereksinimlerinize göre seçip sonra işlev başarısını çağırır: function (data) {// örneğimin div üzerine html yanıtını koymasını istediğinizi yapın}

Öncelikle serializeObject () 'e ihtiyacımız olacak;

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

sonra basit bir gönderi yaparsınız ve yanıt alırsınız

$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data) {
if(data){
//do true 
}
else
{
//do false
}

});

Çok parçalı form verileriyle ajax kullanarak mükemmel bir şekilde aşağıdaki kodu çalıştırıyorum

function getUserDetail()
{
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var phoneNumber = document.getElementById("phoneNumber").value;
    var gender =$("#userForm input[type='radio']:checked").val();
    //var gender2 = document.getElementById("gender2").value;
    //alert("fn"+firstName+lastName+username+email);
    var roleIndex = document.getElementById("role");
    var role = roleIndex.options[roleIndex.selectedIndex].value;
    var jobTitleIndex = document.getElementById("jobTitle");
    var jobTitle = jobTitleIndex.options[jobTitleIndex.selectedIndex].value;
    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var addressLine1 = document.getElementById("addressLine1").value;
    var addressLine2 = document.getElementById("addressLine2").value;
    var streetRoad = document.getElementById("streetRoad").value;

    var countryIndex = document.getElementById("country");
    var country = countryIndex.options[countryIndex.selectedIndex].value;

    var stateIndex = document.getElementById("state");
    var state = stateIndex.options[stateIndex.selectedIndex].value;

    var cityIndex = document.getElementById("city");
    var city = cityIndex.options[cityIndex.selectedIndex].value;



    var pincode = document.getElementById("pincode").value;

    var branchIndex = document.getElementById("branch");
    var branch = branchIndex.options[branchIndex.selectedIndex].value;

    var language = document.getElementById("language").value;
    var profilePicture = document.getElementById("profilePicture").value;
    //alert(profilePicture);
    var addDocument = document.getElementById("addDocument").value;


    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var data = new FormData();
    data.append('firstName', firstName);
    data.append('lastName', lastName);
    data.append('username', username);
    data.append('email', email);
    data.append('phoneNumber', phoneNumber);
    data.append('role', role);
    data.append('jobTitle', jobTitle);
    data.append('gender', gender);
    data.append('shiftId', shiftId);
    data.append('lastName', lastName);
    data.append('addressLine1', addressLine1);
    data.append('addressLine2', addressLine2);
    data.append('streetRoad', streetRoad);
    data.append('country', country);
    data.append('state', state);
    data.append('city', city);
    data.append('pincode', pincode);
    data.append('branch', branch);
    data.append('language', language);
    data.append('profilePicture', $('#profilePicture')[0].files[0]);
     for (var i = 0; i < $('#document')[0].files.length; i++) {
            data.append('document[]', $('#document')[0].files[i]);
        }



    $.ajax({
        //url : '${pageContext.request.contextPath}/user/save-user',
        type: "POST",
        Accept: "application/json",
        async: true,
        contentType:false,
        processData: false,
        data: data,
        cache: false,

        success : function(data) {      
            reset();
            $(".alert alert-success alert-div").text("New User Created Successfully!");
         },
       error :function(data, textStatus, xhr){
           $(".alert alert-danger alert-div").text("new User Not Create!");
        }


    });


//

}

JQuery.post () kullanabilir ve sunucudan güzel yapılandırılmış JSON yanıtlarını döndürebilirsiniz. Ayrıca, verilerinizi doğrudan sunucu üzerinde doğrulamanıza / sterilize etmenize olanak tanır, bu iyi bir uygulamadır çünkü bunu istemcide yapmaktan daha güvenlidir (ve hatta daha kolaydır).

Örneğin, basit kayıt için kullanıcı verileriyle birlikte html formunu sunucuya göndermeniz gerekiyorsa (eprofilechanges.php'yi kaydetmek için):

I. İstemci bölümleri:

Bir HTML bölümü:

<form id="user_profile_form">
  <label for="first_name"><input type="text" name="first_name" id="first_name" required />First name</label>
  <label for="family_name"><input type="text" name="family_name" id="family_name" required />Family name</label>
  <label for="email"><input type="email" name="email" id="email" required />Email</label> 
  <input type="submit" value="Save changes" id="submit" />
</form>

Ib Komut Dosyası bölümü:

$(function () {
    $("#user_profile_form").submit(function(event) {
      event.preventDefault();
      var postData = {
        first_name: $('#first_name').val(),
        family_name: $('#family_name').val(),
        email: $('#email').val()
      };
      $.post("/saveprofilechanges.php", postData,
        function(data) {
          var json = jQuery.parseJSON(data);
          if (json.ExceptionMessage != undefined) {
            alert(json.ExceptionMessage); // the exception from the server
            $('#' + json.Field).focus(); // focus the specific field to fill in
          }
          if (json.SuccessMessage != undefined) {
            alert(json.SuccessMessage); // the success message from server
          }
       });
    });
});

II. Sunucu bölümü (saveprofilechanges.php):

$data = $_POST;
if (!empty($data) && is_array($data)) {
    // Some data validation:
    if (empty($data['first_name']) || !preg_match("/^[a-zA-Z]*$/", $data['first_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "First name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'first_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['family_name']) || !preg_match("/^[a-zA-Z ]*$/", $data['family_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "Family name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'family_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
       echo json_encode(array(
         'ExceptionMessage' => "Email missing or incorrectly formatted. Please enter it again.",
         'Field' => 'email' // Form field to focus in client form
       ));
       return FALSE;
    }
    // more actions..
    // more actions..
    try {
       // Some save to database or other action..:
       $this->User->update($data, array('username=?' => $username));
       echo json_encode(array(
         'SuccessMessage' => "Data saved!"
       ));
       return TRUE;
    } catch (Exception $e) {
       echo json_encode(array(
         'ExceptionMessage' => $e->getMessage()
       ));
       return FALSE;
    }
}

bunu ajax olmadan yapabilirsiniz.

aşağıya beğeninizi yazın.

.. .. ..

ve sonra "action.php" içinde

sonra frmLogin.submit ();

$ submit_return değişkenini oku ..

$ submit_return dönüş değerini içerir.

iyi şanslar.