ฉันจะจับการตอบสนองของ form.submit ได้อย่างไร

ฉันมีรหัสต่อไปนี้:

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

            form1.submit();
        }

        function ShowResponse()
        {

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

ฉันต้องการจับการตอบสนอง html ของform1.submit? ฉันต้องทำอย่างไร ฉันสามารถลงทะเบียนฟังก์ชันการโทรกลับไปยังเมธอด form1.submit ได้หรือไม่

คุณจะไม่สามารถทำได้อย่างง่ายดายด้วยจาวาสคริปต์ธรรมดา เมื่อคุณโพสต์ฟอร์มอินพุตแบบฟอร์มจะถูกส่งไปยังเซิร์ฟเวอร์และเพจของคุณจะถูกรีเฟรช - ข้อมูลจะถูกจัดการทางฝั่งเซิร์ฟเวอร์ นั่นคือsubmit()ฟังก์ชั่นไม่ได้ส่งคืนอะไรเลยเพียงแค่ส่งข้อมูลแบบฟอร์มไปยังเซิร์ฟเวอร์

หากคุณต้องการได้รับคำตอบใน Javascript จริงๆ (โดยไม่รีเฟรชหน้า) คุณจะต้องใช้ AJAX และเมื่อคุณเริ่มพูดถึงการใช้ AJAX คุณจะต้องใช้ไลบรารี jQueryเป็นที่นิยมมากที่สุดและเป็นที่ชื่นชอบส่วนตัวของฉัน มีปลั๊กอินที่ยอดเยี่ยมสำหรับ jQuery ที่เรียกว่าFormซึ่งจะทำในสิ่งที่คุณต้องการ

นี่คือวิธีที่คุณใช้ jQuery และปลั๊กอินนั้น:

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

ทางเลือกหนึ่งของ Ajax คือการตั้งค่าการมองไม่เห็น<iframe>เป็นเป้าหมายของแบบฟอร์มของคุณและอ่านเนื้อหาของสิ่งนั้น<iframe>ในonloadตัวจัดการ แต่ทำไมต้องกังวลเมื่อมี Ajax?

หมายเหตุ:ฉันแค่อยากจะพูดถึงทางเลือกนี้เนื่องจากคำตอบบางคำอ้างว่าเป็นไปไม่ได้ที่จะบรรลุสิ่งนี้หากไม่มี Ajax

วิธี Javascript วานิลลาที่ไม่ใช่ jQuery สกัดจากความคิดเห็นของ 12me21:

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

สำหรับPOSTประเภทเนื้อหาเริ่มต้นคือ "application / x-www-form-urlencoded" ซึ่งตรงกับสิ่งที่เราส่งในตัวอย่างด้านบน หากคุณต้องการส่ง "สิ่งอื่น ๆ " หรือปรับแต่งให้ดูที่นี่สำหรับรายละเอียดที่น่าสนใจ

ฉันทำแบบนี้และได้ผล

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

ผู้ค้นหาอินเทอร์เน็ตในอนาคต:

สำหรับเบราว์เซอร์ใหม่ (ณ ปี 2018: Chrome, Firefox, Safari, Opera, Edge และเบราว์เซอร์มือถือส่วนใหญ่ แต่ไม่ใช่ IE) fetchเป็น API มาตรฐานที่ช่วยลดความยุ่งยากในการเรียกเครือข่ายแบบอะซิงโครนัส (ซึ่งเราเคยต้องการXMLHttpRequestหรือของ jQuery $.ajax)

นี่คือรูปแบบดั้งเดิม:

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

หากมีการส่งแบบฟอร์มดังกล่าวข้างต้นให้กับคุณ (หรือคุณสร้างขึ้นเพราะเป็น html เชิงความหมาย) คุณสามารถรวมfetchโค้ดไว้ในตัวฟังเหตุการณ์ได้ดังนี้:

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
    });
});

(หรือหากชอบโปสเตอร์ต้นฉบับที่คุณต้องการเรียกมันด้วยตนเองโดยไม่ต้องส่งเหตุการณ์ให้ใส่fetchรหัสที่นั่นและส่งต่อการอ้างอิงไปยังformองค์ประกอบแทนที่จะใช้event.target)

เอกสาร:

ดึงข้อมูล: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

อื่น ๆ : https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript หน้านั้นในปี 2018 ไม่ได้กล่าวถึงการดึงข้อมูล (ยัง) แต่ระบุว่ากลเม็ด target = "myIFrame" เลิกใช้งานแล้ว และยังมีตัวอย่างของ form.addEventListener สำหรับเหตุการณ์ 'ส่ง'

ฉันไม่แน่ใจว่าคุณเข้าใจสิ่งที่ submit () ทำ ...

เมื่อคุณทำform1.submit();แบบฟอร์มข้อมูลจะถูกส่งไปยังเว็บเซิร์ฟเวอร์

WebServer จะทำทุกอย่างที่ควรทำและส่งคืนหน้าเว็บใหม่ให้กับลูกค้า (โดยปกติจะเป็นหน้าเดิมที่มีการเปลี่ยนแปลงบางอย่าง)

ดังนั้นไม่มีทางที่คุณจะสามารถ "จับ" ผลตอบแทนของการดำเนินการ form.submit ()

ไม่มีการติดต่อกลับ มันเหมือนตามลิงค์

หากคุณต้องการบันทึกการตอบสนองของเซิร์ฟเวอร์ให้ใช้ AJAX หรือโพสต์ลงใน Iframe แล้วคว้าสิ่งที่ปรากฏหลังจากonload()เหตุการณ์ของ iframe

คุณสามารถevent.preventDefault()ในตัวจัดการการคลิกสำหรับปุ่มส่งของคุณเพื่อให้แน่ใจว่าsubmitเหตุการณ์เริ่มต้นของรูปแบบ HTML ไม่เริ่มทำงาน (ซึ่งเป็นสิ่งที่นำไปสู่การรีเฟรชหน้า)

อีกทางเลือกหนึ่งคือการใช้มาร์กอัปแบบฟอร์มแฮ็กเกอร์นั่นคือการใช้งาน<form>และtype="submit"กำลังเข้ามาขัดขวางพฤติกรรมที่ต้องการที่นี่ เนื่องจากสิ่งเหล่านี้นำไปสู่เหตุการณ์การคลิกที่รีเฟรชหน้าในที่สุด

หากคุณต้องการที่จะยังคงใช้<form>และคุณไม่ต้องการที่จะเขียนที่กำหนดเองคลิกไสคุณสามารถใช้ของ jQuery ajaxวิธีการซึ่งบทคัดย่อปัญหาทั้งหมดออกไปสำหรับคุณโดยการเปิดเผยวิธีการให้คำมั่นสัญญาsuccess, errorฯลฯ

ในการสรุปคุณสามารถแก้ปัญหาของคุณได้โดย:

•ป้องกันพฤติกรรมเริ่มต้นในฟังก์ชันการจัดการโดยใช้ event.preventDefault()

•การใช้องค์ประกอบที่ไม่มีพฤติกรรมเริ่มต้น (เช่น<form>)

•ใช้ jQuery ajax

(ฉันเพิ่งสังเกตว่าคำถามนี้มาจากปี 2008 ไม่แน่ใจว่าเหตุใดจึงปรากฏในฟีดของฉันหวังว่านี่จะเป็นคำตอบที่ชัดเจน)

นี่คือรหัสของฉันสำหรับปัญหานี้:

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

ในกรณีที่คุณต้องการบันทึกผลลัพธ์ของคำขอ AJAX โดยใช้ Chrome คุณสามารถทำตามขั้นตอนง่ายๆเหล่านี้:

1. เปิดกล่องเครื่องมือโปรแกรมเมอร์
2. ไปที่คอนโซลและตรงไหนก็ได้ภายใน
3. ในเมนูที่ปรากฏขึ้นคลิก "เปิดใช้งาน XMXHTTPRequest Logging"
4. หลังจากทำเช่นนั้นทุกครั้งที่คุณส่งคำขอ AJAX ข้อความที่ขึ้นต้นด้วย "XHR เสร็จสิ้นการโหลด: http: // ...... " จะปรากฏในคอนโซลของคุณ
5. เมื่อคลิกลิงก์ที่ปรากฏขึ้นจะมี "แท็บทรัพยากร" ซึ่งคุณสามารถดูส่วนหัวและเนื้อหาของการตอบกลับได้!

    $.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 ) ฉันจัดการกับข้อผิดพลาดในการโพสต์แบบฟอร์มและความสำเร็จ:

    $('#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 : ''));
            }
        });
    });

ฉันใช้ประโยชน์thisเพื่อให้ตรรกะของฉันสามารถใช้ซ้ำได้ฉันคาดว่า HTML จะถูกส่งคืนเมื่อประสบความสำเร็จดังนั้นฉันจึงแสดงผลและแทนที่หน้าปัจจุบันและในกรณีของฉันฉันคาดว่าจะมีการเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบหากเซสชันหมดเวลาดังนั้น ฉันสกัดกั้นการเปลี่ยนเส้นทางนั้นเพื่อรักษาสถานะของเพจ

ตอนนี้ผู้ใช้สามารถเข้าสู่ระบบผ่านแท็บอื่นและลองส่งอีกครั้ง

คุณต้องใช้ AJAX การส่งแบบฟอร์มมักจะส่งผลให้เบราว์เซอร์โหลดหน้าใหม่

คุณสามารถทำได้โดยใช้เทคโนโลยีจาวาสคริปต์และ AJAX ดู jquery และปลั๊กอินแบบฟอร์มนี้ คุณต้องรวมไฟล์ js สองไฟล์เพื่อลงทะเบียนการเรียกกลับสำหรับ form.submit

คุณสามารถทำได้โดยใช้jQueryและajax()วิธีการ:

<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

ประการแรกใช้ $ (document) .ready (function ()) ภายในการใช้นี้ ('formid') ส่ง (function (event)) จากนั้นป้องกันการดำเนินการเริ่มต้นที่เรียกการส่งแบบฟอร์ม ajax $ .ajax ({,,, ,}); จะใช้พารามิเตอร์ที่คุณสามารถเลือกได้ตามความต้องการของคุณจากนั้นเรียกความสำเร็จของฟังก์ชัน: ฟังก์ชัน (ข้อมูล) {// ทำสิ่งที่คุณต้องการให้ตัวอย่างของฉันใส่ html การตอบสนองบน div}

ก่อนอื่นเราจะต้อง serializeObject ();

$.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;
};

จากนั้นคุณจะโพสต์พื้นฐานและรับคำตอบ

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

});

ฉันมีโค้ดต่อไปนี้รันอย่างสมบูรณ์แบบโดยใช้ ajax ที่มีข้อมูลฟอร์มหลายส่วน

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 ()และส่งคืนคำตอบ JSON ที่มีโครงสร้างอย่างดีจากเซิร์ฟเวอร์ นอกจากนี้ยังช่วยให้คุณตรวจสอบความถูกต้อง / ล้างข้อมูลของคุณโดยตรงบนเซิร์ฟเวอร์ซึ่งเป็นแนวทางปฏิบัติที่ดีเนื่องจากมีความปลอดภัย (และง่ายกว่า) มากกว่าการทำสิ่งนี้บนไคลเอนต์

ตัวอย่างเช่นหากคุณต้องการโพสต์แบบฟอร์ม html ไปยังเซิร์ฟเวอร์ (เพื่อ saveprofilechanges.php) ด้วยข้อมูลผู้ใช้สำหรับการลงทะเบียนแบบง่าย:

I. ส่วนของลูกค้า:

ส่วน Ia HTML:

<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:

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

ครั้งที่สอง ส่วนเซิร์ฟเวอร์ (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;
    }
}

คุณสามารถทำได้โดยไม่ต้องใช้ ajax

เขียนสิ่งที่คุณชอบด้านล่าง

.. .. ..

จากนั้นใน "action.php"

หลังจากนั้น frmLogin.submit ();

อ่านตัวแปร $ submit_return ..

$ submit_return มีค่าส่งคืน

โชคดี.