添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

我想用ajaxSumbit實現提交表單但不跳轉頁面的功能,但怎麼調整頁面還是會跳轉,beforeSumbit、success也都沒有正常顯示,請各位提供指導,謝謝。

demo1.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <script lanaguage='javascript'> $(document).ready(function() { var options = { target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容. beforeSubmit: showRequest, // 提交前 success: showResponse, // 提交後 //Other: //url: url // 預設是form的action,如果寫的話,會覆蓋from的action. //type: type // 預設是form的method,如果寫的話,會覆蓋from的method.('get' or 'post'). //dataType: null // 'xml', 'script', or 'json' (接受服務端返回的型別.) //clearForm: true // 成功提交後,清除所有的表單元素的值. resetForm: true // 成功提交後,重置所有的表單元素的值. //由於某種原因,提交陷入無限等待之中,timeout引數就是用來限制請求的時間, //當請求大於3秒後,跳出請求. //timeout: 3000 $('#myForm').submit(function() { $(this).ajaxSubmit(options); return false; //來阻止瀏覽器提交. // 提交前 function showRequest() { alert("beforeSubmit"); // 提交後 function showResponse() { alert("success"); </script> </head> <form id="myForm" action="ajax.php" method="post"> 名稱: <input type="text" name="name" /> <br /> 地址: <input type="text" name="address" /><br /> 自我介紹: <textarea name="comment"></textarea> <br /> <input type="submit" id="test" value="提交" /> <br /> <div id="output1"></div> </form> </body> </html>

ajax.php

if(isset($_POST["name"])){ $vName = $_POST["name"]; echo $vName; if(isset($_POST["address"])){ $vAddress = $_POST["address"]; echo $vAddress; if(isset($_POST["comment"])){ $vComment = $_POST["comment"]; echo $vComment;

preventDefault 阻止預設行為

原生 javascript

document.querySelector('#myForm').addEventListener('submit', (e)=>{
    e.preventDefault();
    console.log('submit');

jquery

$('#myForm').submit((e)=>{
    e.preventDefault();
    console.log('submit');
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
		<script src="http://malsup.github.com/jquery.form.js"></script>
		<script lanaguage='javascript'>
        $(document).ready(function() {
            var options = {
	            target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容.
	            beforeSubmit: showRequest, // 提交前
	            success: showResponse, // 提交後
	            //Other:
	            //url: url // 預設是form的action,如果寫的話,會覆蓋from的action.
	            //type: type // 預設是form的method,如果寫的話,會覆蓋from的method.('get' or 'post').
	            //dataType: null // 'xml', 'script', or 'json' (接受服務端返回的型別.)
	            //clearForm: true // 成功提交後,清除所有的表單元素的值.
	            resetForm: true // 成功提交後,重置所有的表單元素的值.
	            //由於某種原因,提交陷入無限等待之中,timeout引數就是用來限制請求的時間,
	            //當請求大於3秒後,跳出請求.
	            //timeout: 3000
            // $('#myForm').submit(function() {
	           //  $(this).ajaxSubmit(options);
	           //  return false; //來阻止瀏覽器提交.
	           //  });
	           $('#myForm').submit((e)=>{
				    e.preventDefault();
				    console.log('submit');
				    $(this).ajaxSubmit(options);
	            	return false; //來阻止瀏覽器提交.
        // 提交前
        function showRequest() {
            alert("beforeSubmit");
        // 提交後
        function showResponse() {
            alert("success");
        </script>
    </head>
        <form id="myForm" action="b.php" method="post">
            名稱: <input type="text" name="name" /> <br />
            地址: <input type="text" name="address" /><br />
            自我介紹: <textarea name="comment"></textarea> <br />
            <input type="submit" id="test" value="提交" /> <br />
            <div id="output1"></div>
        </form>
    </body>
</html>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
		<script src="http://malsup.github.com/jquery.form.js"></script>
		<script lanaguage='javascript'>
        $(document).ready(function() {
            var options = {
	            target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容.
	            beforeSubmit: showRequest, // 提交前
	            success: showResponse, // 提交後
	            //Other:
	            //url: url // 預設是form的action,如果寫的話,會覆蓋from的action.
	            //type: type // 預設是form的method,如果寫的話,會覆蓋from的method.('get' or 'post').
	            //dataType: null // 'xml', 'script', or 'json' (接受服務端返回的型別.)
	            //clearForm: true // 成功提交後,清除所有的表單元素的值.
	            resetForm: true // 成功提交後,重置所有的表單元素的值.
	            //由於某種原因,提交陷入無限等待之中,timeout引數就是用來限制請求的時間,
	            //當請求大於3秒後,跳出請求.
	            //timeout: 3000
            // $('#myForm').submit(function() {
	           //  $(this).ajaxSubmit(options);
	           //  return false; //來阻止瀏覽器提交.
	           //  });
	           $('#myForm').submit((e)=>{
				    e.preventDefault();
				    console.log('submit');
				    $(this).ajaxSubmit(options);
	            	return false; //來阻止瀏覽器提交.
        // 提交前
        function showRequest() {
            alert("beforeSubmit");
        // 提交後
        function showResponse() {
            alert("success");
        </script>
    </head>
        <form id="myForm" action="b.php" method="post">
            名稱: <input type="text" name="name" /> <br />
            地址: <input type="text" name="address" /><br />
            自我介紹: <textarea name="comment"></textarea> <br />
            <input type="submit" id="test" value="提交" /> <br />
            <div id="output1"></div>
        </form>
    </body>
</html>
                            

這個JS檔案我這邊讀取不到:<script src="http://malsup.github.com/jquery.form.js"></script>

由於上述理由,我不知道 $(this).ajSubmit(options); 會不會有問題

提交表單後,你的 console 有顯示 submit 字串嗎?
如果有的話,問題不在 submit 的事件處理
而是 ajSubmit 這個 method 可能有問題
(因為讀不到檔案,沒法幫你看)