php - Submit Search query & get Search result without refresh -

मुझे खोज क्वेरी सबमिट करें फ़ॉर्म और amp; उसी पृष्ठ पर पुनः निर्देशित / पुनः लोड / रीफ़्रेशिंग के बिना खोज परिणाम प्राप्त करें।

मेरी सामग्री गतिशील है, इसलिए इसका उपयोग नहीं किया जा सकता वे "ताज़ा पृष्ठ बिना संपर्क फ़ॉर्म सबमिट करें जो सफलता पर वापस जवाब देता है।"

एक फॉर्म सबमिट करने के लिए , डेटाबेस से नतीजे इकट्ठा करें और उन्हें पृष्ठ ताज़ा करें, रीडायरेक्ट या पुनः लोड किए बिना उपयोगकर्ता को पेश करें, आपको इसकी आवश्यकता है:

1. अपने फ़ॉर्म से डेटा पोस्ट करने के लिए एजेक्स का उपयोग करें Php फ़ाइल;

2. पृष्ठभूमि में वह फ़ाइल डेटाबेस से क्वेरी करेगी और प्राप्त की गई डेटा के लिए परिणाम प्राप्त करेगी;

3. क्वेरी परिणाम के साथ, आपको इसे अपने पृष्ठ में एक html तत्व के अंदर इंजेक्ट करना होगा जो उपयोगकर्ता को परिणाम प्रस्तुत करने के लिए तैयार है;

4. अंत में, आपको कुछ नियंत्रित सामग्री को शैलियों और दस्तावेज़ वर्कफ़्लो को आसानी से चलाने के लिए सेट करें।

---

इसलिए, यह कहकर, यहां एक काम है उदाहरण:

हमारे पास क्षेत्र "आयु" और एक क्षेत्र "नाम" के साथ एक टेबल "व्यक्ति" है और हम 32 वर्ष की आयु वाले व्यक्तियों की खोज करने जा रहे हैं। अगला हम उनके नाम और आयु पेश करेंगे गुलाबी पृष्ठभूमि के साथ एक टेबल के साथ एक div के अंदर और बहुत बड़ा टेक्स्ट।
इसे ठीक से जांचने के लिए, हमारे पास एक हेडर, शरीर और धूसर रंग के रंग होंगे!

index.php

<प्री> & lt;! DOCTYPE HTML PUBLIC "- // W3C / / DTD एचटीएमएल 4.01 // एन" http: //www.w3.org/TR/html4/strict.dtd"> & Lt; html lang = "pt" dir = "ltr" & gt; & Lt; शीर्ष & gt; & Lt; शीर्षक & gt; खोज और बिना ताज़ा करें & lt; / title & gt; & Lt; मेटा HTTP-EQUIV = "कंटेंट-टाइप" CONTENT = "text / html; charset = आईएसओ -885 9 -1" & gt; & Lt; meta http-equiv = "सामग्री-शैली-प्रकार" सामग्री = "पाठ / सीएसएस" & gt; & Lt;! - GOOGLE API से JQUERY - & gt; & Lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" & gt; $ (फ़ंक्शन () {$ ("# lets_search")। Bind ('submit', फ़ंक्शन () {var मान = $ ('# str')। Val (); $ .post ('db_query.php', { मान: मान}, फ़ंक्शन (डेटा) {$ ("# search_results")। Html (डेटा);}); वापसी झूठी;});}); & Lt; / स्क्रिप्ट & gt; & Lt; / head & gt; & Lt; बॉडी स्टाइल = "मार्जिन: 0; पैडिंग: 0 पिक्सेल; चौड़ाई: 100%; ऊंचाई: 100%; पृष्ठभूमि-रंग: # एफएफएफएफएफएफ;" & gt; & Lt; div शैली = "चौड़ाई: 1024px; मार्जिन: 0 स्वत: ऊंचाई: 100px; पृष्ठभूमि-रंग: # एफ0f0f0; पाठ-संरेखण: केंद्र;" & gt; हेडर & lt; / div & gt; & Lt; div शैली = "चौड़ाई: 1024px; मार्जिन: 0 ऑटो; ऊंचाई: 568 पीएक्स; पृष्ठभूमि रंग: # एफ0 एफ 0 एफ 0; पाठ-संरेखण: केंद्र;" & gt; & Lt; form id = "lets_search" एक्शन = "" शैली = "चौड़ाई: 400px; मार्जिन: 0 ऑटो; पाठ-पंक्ति: बायां;" & gt; खोज: & lt; इनपुट प्रकार = "टेक्स्ट" नाम = "str" ​​id = "str" ​​& gt; & Lt; इनपुट प्रकार = "सबमिट करें" मान = "भेजें" नाम = "भेजें" id = "भेजें" & gt; & Lt; / प्रपत्र & gt; & Lt; div id = "search_results" & gt; & lt; / div & gt; & Lt; / div & gt; & Lt; div शैली = "चौड़ाई: 1024px; मार्जिन: 0 स्वत: ऊंचाई: 100px; पृष्ठभूमि-रंग: # एफ0f0f0; पाठ-संरेखण: केंद्र;" & gt; फ़ूटर & lt; / div & gt; & Lt; / body & gt; & Lt; / html & gt;

db_query.php

<प्री> & amp; php define ("HOST", "localhost"); // डाटाबेस उपयोगकर्ता परिभाषित ("डीबीयूएसईआर", "उपयोगकर्ता नाम"); // डाटाबेस पासवर्ड परिभाषित करें ("पास", "पासवर्ड"); // डाटाबेस नाम परिभाषित करें ("डीबी", "डेटाबेस_नाम"); // डाटाबेस त्रुटि - उपयोगकर्ता संदेश परिभाषित ("डीबी_एमएसजी_एआरआरओआर", 'कनेक्ट नहीं हो सका! & Lt; br / & gt; कृपया साइट के व्यवस्थापक से संपर्क करें।'); ############## mysql कनेक्शन को ########### conn = mysql_connect (HOST, DBUSER, PASS) या मरना (DB_MSG_ERROR) करें; $ Db = mysql_select_db (डीबी) या मर (डीबी_एमएसजी_एरआरओआर); $ Query = mysql_query ("का चयन करें * व्यक्तियों से जहां उम्र = '" $ _ POST [' मूल्य ']। "'"); गूंज & lt; तालिका & gt; '; जबकि ($ डेटा = mysql_fetch_array ($ query)) {ईको '& lt; tr शैली = "पृष्ठभूमि-रंग: गुलाबी;" & gt; & Lt; td शैली = "फ़ॉन्ट-आकार: 18px;" & gt; '। $ डेटा ["नाम"]। "& Lt; / td & gt; & Lt; td शैली = "फ़ॉन्ट-आकार: 18px;" & gt; '। $ डेटा ["आयु"]। "& Lt; / td & gt; & Lt; / टीआर & gt; '; } गूंज '& lt; / table & gt;'; ? & Gt;

नियंत्रित चीजें आप क्या चाहते हैं, परन्तु उस कोड का उपयोग करते हैं, उन दो फ़ाइलों को एक ही निर्देशिका में रखें, और आपको ठीक होना चाहिए!

कोई भी समस्याएं या एक अधिक स्पष्टिकरण कोड, कृपया हमें बताएं;)