哈宅哈宅

隨意寫了一個跟jquery及javascript有關的網頁程式碼

他是一個模擬表單發送及獲取回傳結果的程式

例如:

google.com搜尋引擎

我們可以直接從網址打上參數進行搜尋，

http://www.google.com.tw/search?q=欲搜尋文字

於是乎製作了一個網頁，讓使用者可以在網頁上輸入目的網址(ex:http://www.google.com.tw/search)以及參數項目(q=xxxxx)，

有些網頁要求的不只一個參數，所以使用者可以動態的增加/減少參數項目，

最後把回傳內容顯示出來。

程式:

由於程式碼中有用到jquery，所以要先加入jquery的library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

先看html的部分，

<span onclick="javascript:form_send();">Submit</span> <span id="detials"></span><br />
  <div id="form-header">
  <input type="text" id="form_action" size="70" title="please input action uri" />
  <select id="form_method">
<option value="0">POST</option>
<option value="1">GET</option>
  </select>
  <select id="data_type">
<option value="0">HTML</option>
<option value="1">TEXT</option>
<option value="2">SCRIPT</option>
<option value="3">JSON</option>
<option value="4">XML</option>
<option value="5">JSONP</option>
  </select>
  </div>
  <span onclick="javascript:form_item();">add</span><br />
  <div id="form-items"></div>
  <div id="results"></div>

接著css的部分，

<style>
.btn {cursor: pointer; color: blue; padding: 2px; margin: 2px;}
.btn:hover {color: white; background: black;}
#detials {color: gray; font-size: 13px;}
</style>

最後是javascript的部分，(10 functions)

    <script>

/***
* 待解決跨網域讀取出現錯誤的問題 ajax
*/
//main attibutes
var form_items, exist_items, form_dels;
var dataTypes = new Array("html", "text", "script", "json", "xml", "jsonp");
//initialize
function init() {
form_items = 0;
exist_items = 0;
form_dels = null;
form_dels = new Array();
}
//call form_item$()
function form_item() {
switch(arguments.length) {
case 1:
form_item2(arguments[0]);
break;
default:
form_item1();
}
}
//add form item function
function form_item1() {
exist_items++;
form_items++;
item_generate(form_items);
show_detial();
}
//delete form item function
function form_item2(item_id) {
exist_items--;
form_dels.push(item_id);
var del_id = '#form-item-' + item_id;
$(del_id).remove();
show_detial();
}
//generate form and get result
function form_send() {
//msg attibutes
var msg_err = "Sorry but there was an error: ";


//codes
// no items
if(exist_items < 1) {
alert('Sorry, there\'s no items.');
return -1;
}
// has items
var resultHeader = "<hr /><span onclick=\"javascript:clearResult();\" class=\"btn\" style=\"float:right;\">Clear</span>";
var form_action_val = $('#form_action').val();
var maps = eval('(' + maps_generate() + ')');
var method = ($('#form_method').val() == '0')? 'POST' : 'GET';
var datatype = $('#data_type').val();
$.ajax({
type: method,
url: form_action_val,
dataType: dataTypes[datatype],
data: $.param(maps),
success: function(response) {
$('#results').html(resultHeader + "<div>" + response + "</div>");
},
error: function(response) {
alert(response);
}
});
/**
$('#results').load(form_action_val, maps, function(response, response_status, xhr) {
if(response_status == "error") {
$(this).html(msg_err + xhr.status + " " + xhr.statusText);
} else {
$(this).html("<hr />" + response);
}
});
*/
}
function clearResult() {
$('#results > div').remove();
}
//generate vars
function maps_generate() {
var codes = "{ ";
var i;
for (i=0; i<exist_items; i++) {
if(search_dels_array(i, form_dels) < 0) {
codes += "'"+$('#form-item-'+i+'_name').val()+"': '"+$('#form-item-'+i+'_value').val()+"'";
}
if((i+1) < exist_items)
codes += ", ";
}
codes += " }";
return codes;
}
//search deleted array
function search_dels_array(item_id, array) {
var dels_len = array.length;
var k;
if(dels_len == 0)
return -1;
for (k=0; k<dels_len; k++) {
if(item_id == form_dels[k]) {
array.shift();
return 1;
}
}
return -1;
}
//generate form item
function item_generate(item_id) {
//items html attibutes
var div_id = "form-item-"+item_id;
var name_id = "form-item-"+item_id+"_name";
var name_class = "form-item_name";
var name_size = "20";
var name_title = "please input item name";
var value_id = "form-item-"+item_id+"_value";
var value_class = "form-item_value";
var value_size = "50";
var value_title = "please input item value";
var btn_click_func = "form_item("+item_id+")";
var btn_onclick="javascript:"+btn_click_func+";";
var btn_class = "btn";
var btn_val = "delete";
//generated code
var codes = "<div id=\""+div_id+"\">\n\t<input type=\"text\" id=\""+name_id+"\" class=\""+name_class+"\" size=\""+name_size+"\" title=\""+name_title+"\" />\n\t<input type=\"text\" id=\""+value_id+"\" class=\""+value_class+"\" size=\""+value_size+"\" title=\""+value_title+"\" />\n\t<span onclick=\""+btn_onclick+"\" class=\""+btn_class+"\">"+btn_val+"</span> item "+(item_id+1)+"</div>";
$('#form-items').append(codes);
}
//show detial about 'how many added or exist items?' or 'who's be deleted?'...
function show_detial() {
form_dels.sort();
$('#detials').html('added <b>'+(form_items+1)+'</b> items; be deleted array: <b>'+form_dels.toString()+'</b>; exist <b>'+exist_items+'</b> items');
}
$(document).ready(function() {
//TO DO
init();
exist_items++;
item_generate(form_items);
show_detial();
});
  </script>