ich created a .json file with data records from which I want to extract data records per user request.
I created 2 ajax components: one for getting user data and one for getting external json data. Now I cannot join both. Can you help me out here ?
- here is the code for the html input form:
Expand|Select|Wrap|Line Numbers
- - hier ist der HTML FORM Code zu User Input:
- <form id="myform" name="myform" enctype="multipart/form-data" action="register1.php" method="post" onsubmit="AJAXSubmit(this); return false;">
- <label>RS1
- <select name="rs">
- <option value="red" selected>für RW</option>
- <option value="white">für WW</option>
- </select>
- </label>
- <label>Region
- <select name="region">
- <option value="region1" selected>REG A</option>
- <option value="region2">REG A</option>
- <option value="region3">REG A</option>
- <option value="region4">REG A</option>
- </select>
- </label>
- <input id="bg" type="checkbox" name="bg" value="1"/> <label for="bg">bg</label>
- <input id="submit" type="submit" value="submit">
- </fieldset>
- </form>
https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
Expand|Select|Wrap|Line Numbers
- var AJAXSubmit = (function () {
- function ajaxSuccess () {
- // var jsonObj = JSON.parse(data_file);
- // document.getElementById("id01").innerHTML = this.responseText;
- loadJS(function(response) {
- // Do Something with the response e.g.
- jsonresponse = JSON.parse(response);
- // Assuming json data is wrapped in square brackets as Drew suggests
- document.getElementById("id01").innerHTML = jsonresponse;
- //console.log(jsonresponse[0].name);
- });
- // document.getElementById("id01").innerHTML = mydata[0].name;
- }
- // new
- function loadJS(callback) {
- var xobj = new XMLHttpRequest();
- xobj.overrideMimeType("application/json");
- xobj.open('GET', 'grapes1.json', true);
- xobj.onreadystatechange = function () {
- if (xobj.readyState == 4 && xobj.status == "200") {
- callback(xobj.responseText);
- }
- }
- xobj.send(null);
- }
- function submitData (oData) {
- /* the AJAX request... */
- var oAjaxReq = new XMLHttpRequest();
- oAjaxReq.submittedData = oData;
- oAjaxReq.onload = ajaxSuccess;
- if (oData.technique === 0) {
- /* method is GET */
- oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
- oAjaxReq.send(null);
- } else {
- /* method is POST */
- oAjaxReq.open("post", oData.receiver, true);
- if (oData.technique === 3) {
- /* enctype is multipart/form-data */
- var sBoundary = "---------------------------" + Date.now().toString(16);
- oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
- oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
- } else {
- /* enctype is application/x-www-form-urlencoded or text/plain */
- oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
- oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
- }
- }
- }
- function processStatus (oData) {
- if (oData.status > 0) { return; }
- /* the form is now totally serialized! do something before sending it to the server... */
- /* doSomething(oData); */
- /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
- submitData (oData);
- }
- function pushSegment (oFREvt) {
- this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
- this.owner.status--;
- processStatus(this.owner);
- }
- function plainEscape (sText) {
- /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
- /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
- return sText.replace(/[\s\=\\]/g, "\\$&");
- }
- function SubmitRequest (oTarget) {
- var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
- /* console.log("AJAXSubmit - Serializing form..."); */
- this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
- this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
- this.receiver = oTarget.action;
- this.status = 0;
- this.segments = [];
- var fFilter = this.technique === 2 ? plainEscape : escape;
- for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
- oField = oTarget.elements[nItem];
- if (!oField.hasAttribute("name")) { continue; }
- sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
- if (sFieldType === "FILE" && oField.files.length > 0) {
- if (this.technique === 3) {
- /* enctype is multipart/form-data */
- for (nFile = 0; nFile < oField.files.length; nFile++) {
- oFile = oField.files[nFile];
- oSegmReq = new FileReader();
- /* (custom properties:) */
- oSegmReq.segmentIdx = this.segments.length;
- oSegmReq.owner = this;
- /* (end of custom properties) */
- oSegmReq.onload = pushSegment;
- this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
- this.status++;
- oSegmReq.readAsBinaryString(oFile);
- }
- } else {
- /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
- for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
- }
- } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
- /* field type is not FILE or is FILE but is empty */
- this.segments.push(
- this.technique === 3 ? /* enctype is multipart/form-data */
- "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
- : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
- fFilter(oField.name) + "=" + fFilter(oField.value)
- );
- }
- }
- processStatus(this);
- }
- return function (oFormElement) {
- if (!oFormElement.action) { return; }
- new SubmitRequest(oFormElement);
- };
- })();
Frank