iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 23
0
Modern Web

網頁程式設計so easy系列 第 23

Day22 [SESSION、檔案處理、電子郵件處理範例-2]

  • 分享至 

  • xImage
  •  

http://ithelp.ithome.com.tw/upload/images/20161222/20103385PAaOENnCdF.png


saveAndSend.php(顯示表單頁)

http://ithelp.ithome.com.tw/upload/images/20161222/20103385WLZqEFA7R4.png

程式碼:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>saveAndSend.php</title>
	<script src="http://code.jquery.com/jquery-3.1.1.min.js">
	</script>
</head>
<body>
	<h1>Basic Information</h1>
	<hr>
<?php
session_start();
$_SESSION["name"] = $_POST["name"];
$_SESSION["tel"] = $_POST["tel"];
$_SESSION["birthday"] = $_POST["birthday"];
$_SESSION["email"] = $_POST["email"];
$_SESSION["address"] = $_POST["address"];
print "姓名: <span id='name'>".$_SESSION["name"]."</span><br/>";
print "電話: <span id='tel'>".$_SESSION["tel"]."</span><br/>";
print "生日: <span id='birthday'>".$_SESSION["birthday"]."</span><br/>";
print "EMail: <span id='email'>".$_SESSION["email"]."</span><br/>";
print "地址: <span id='address'>".$_SESSION["address"]."</span><br/>";
?>
	<br>
	<input type="button" id="SaveToCsv" value="儲存至檔案"/>
	<input type="button" id="Send" value="寄送"/>
	<br><br>
	<input type="button" name="back" onclick="location.href='form.html'" value="重新填寫"/>
	<hr>
	<div id="result"></div>
	<script>
		
		$('#SaveToCsv').click(function(){
			/*如果要使用javaScript儲存至檔案,寫在這裡。*/

        	$.ajax({
                url: "save.php",
                data: {
                	name: $('#name').text(),
     				tel: $('#tel').text(),
					birthday: $('#birthday').text(),
					email: $('#email').text(),
					address: $('#address').text()
                },
                type:"POST",
                dataType:'text',

                success: function(msg){
                    $('#result').text("儲存成功!");
                },

                 error:function(xhr, ajaxOptions, thrownError){ 
                    alert(xhr.status); 
                    alert(thrownError); 
                 }
            });

		});

		$('#Send').click(function(){
			/*如果要使用javaScript寄email,寫在這裡。*/
            
			$.ajax({
                url: "send.php",
                data: {
                	name: $('#name').text(),
     				tel: $('#tel').text(),
					birthday: $('#birthday').text(),
					email: $('#email').text(),
					address: $('#address').text()
                },
                type:"POST",
                dataType:'text',

                success: function(msg){
                    $('#result').text("寄送成功!");
                },

                 error:function(xhr, ajaxOptions, thrownError){ 
                    alert(xhr.status); 
                    alert(thrownError); 
                 }
            });

		});

	</script>
</body>
</html>

參考:http://www.w3schools.com/jquery/jquery_ajax_get_post.asp

https://blog.wu-boy.com/2011/04/%E4%BD%A0%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84-json-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9/

https://blog.wu-boy.com/2008/09/jquery-ajax-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-%E4%B8%80-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-json-%E9%A9%97%E8%AD%89%E4%BD%BF%E7%94%A8%E8%80%85%E8%A1%A8%E5%96%AE/

http://www.smalljacky.com/programming-language/php/ajax-javascript-jquery-example-for-php/


上一篇
Day21 [SESSION、檔案處理、電子郵件處理範例-1]
下一篇
Day23 [SESSION、檔案處理、電子郵件處理範例-3]
系列文
網頁程式設計so easy30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言